欢迎您访问 最编程 本站为您分享编程语言代码,编程技术文章!
您现在的位置是: 首页

vue 父子组件通信

最编程 2024-07-04 08:34:23
...

.vue文件是单文件组件,一个.vue文件就是一个组件(页面)每一个.整个项目(页面)就是由多个组件构成的

当我们同时有俩个组件,B组件需要用到A组件里面数据的时候,就是组件通讯

父子组件 :如果一个组件A在组件B中被导入使用,称组件B是父组件,组件A是子组件

image.png 那怎么样让父子组件之间实现数据互传呢?

父传子:

1.在父组件使用的子组件标签中写入自定义属性<br>
2.在子组件export dafault 中写入poros:["自定义属性名","自定义属性名"]<br>
注意:
   1.要写引号
   2.可以写多个自定义属性

上图:

image.png

示例:

image.png 现在我们知道了父传子,那你是不是会想子传父是不是也是一样的呢?
现在我们来说一下子传父
子传父是指:从子组件内部把数据传出来给父组件使用或者修改父组件数据

子传父:

 1.在父组件使用的子组件标签中写入自定义事件
 2.在子组件内调用this.$emit("自定义事件",传的数据)
 

image.png

示例:

image.png 这样就完成了,父子组件之间的通讯了.