详细聊聊vue组件是如何实现组件通讯的

目录

• 前言
• 如何解决组件之间通讯呢？
• 解决方案：
• 父传子
• 实现过程:
• 原理图示
• 父组件 Footer.vue
• 子组件 MyCon.vue
• 小案例 采用了父传子
• 父组件 App.vue
• 子组件 MyProduct.vue
• 效果展示
• 子传父
• 实现过程
• 原理图示
• 父组件 App.vue
• 子组件 MyCon.vue
• 商品案例 运用了子传父
• 父组件 App.vue
• 子组件 MyProduct.vue
• 效果展示
• 总结

前言

每一个组件中的变量和数据都是独立的，如果别的组件想要访问另一个组件里的数据该怎么做？

如何解决组件之间通讯呢？

解决方案：

可以采用父组件传数据给子组件，还可以子组件传数据给父组件。简称父传子，子传父。

下面详细说说父组件是如何将数据传给子组件的。

父传子

理论：如果一个组件A引入并使用了另一个组件B时,那么组件A就是父组件，组件B就是子组件。

实现过程:

   1.在父组件中引入子组件、注册子组件、使用子组件  
   2.在父组件中的子组件标签上自定义一个属性 左边是定义的名称，右边是父组件中的数据 例如
   
   3.在子组件中用prpos接收父组件传来的数据 例如：prpos:['list']  注意这里面的名称必须要和父组件
   定义的名称一致才能可以。

原理图示

父组件 Footer.vue

在父组件中的子组件标签上自定义一个属性

子组件 MyCon.vue

在子组件中用prpos接收父组件传来的数据

小案例 采用了父传子

父组件 App.vue

子组件 MyProduct.vue

效果展示

子传父

实现过程

     1.在父组件中引入子组件、注册子组件、使用子组件  
     2.在父组件的子组件标签上加一个事件监听 例如:  
     3.在子组件中触发这个自定义的监听事件。例如:this.$emit("abc",参数)

原理图示

父组件 App.vue

在父组件的子组件标签上加一个事件监听 用形参接收数据

子组件 MyCon.vue

在子组件中触发这个自定义的监听事件

商品案例 运用了子传父

父组件 App.vue

子组件 MyProduct.vue

效果展示

总结

到此这篇关于vue组件是如何实现组件通讯的文章就介绍到这了,更多相关vue实现组件通讯内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！