vue 父子组件通信
最编程
2024-07-04 08:34:23
...
.vue文件是单文件组件,一个.vue
文件就是一个组件(页面)每一个.整个项目(页面)就是由多个组件构成的
当我们同时有俩个组件,B组件需要用到A组件里面数据的时候,就是组件通讯
父子组件 :如果一个组件A在组件B中被导入使用,称组件B是父组件,组件A是子组件
那怎么样让父子组件之间实现数据互传呢?
父传子:
1.在父组件使用的子组件标签中写入自定义属性<br>
2.在子组件export dafault 中写入poros:["自定义属性名","自定义属性名"]<br>
注意:
1.要写引号
2.可以写多个自定义属性
上图:
示例:
现在我们知道了父传子,那你是不是会想子传父是不是也是一样的呢?
现在我们来说一下子传父
子传父是指:从子组件内部把数据传出来给父组件使用或者修改父组件数据
子传父:
1.在父组件使用的子组件标签中写入自定义事件
2.在子组件内调用this.$emit("自定义事件",传的数据)
示例:
这样就完成了,父子组件之间的通讯了.
上一篇: vue 父子组件的值传递和方法交互
下一篇: 智能手推车速度测量 (3.26)
推荐阅读
-
Vue.js 组件开发:从基础到高级功能
-
VUE] Vue 中的 keep-alive 组件Vue 中的 keep-alive 组件
-
Vue.js 错误异常: 组件模板应包含一个根元素。
-
[vue3] 实现 el-tree 组件,将不同级别的箭头修改为自定义图标
-
关于 vue 跨标签(或跨窗口)通信的详细教程
-
TDesign 组件库 + vue3 + ts 如何直观地合并内容相同的表格列?(自定义合并表格列)
-
vue2 中的 vue-count-to 组件允许动态显示从某一数字到某一数字的数字(附带 vue3 的用法)。
-
vue-scroll 实现页面组件锚点定位 - 后台
-
vue 框架学习 - 父子页面参数方法调用
-
如何在 vue 中实现组件通信