vue父子组件间怎么进行通讯

本文小编为大家详细介绍"vue父子组件间怎么进行通讯"，内容详细，步骤清晰，细节处理妥当，希望这篇"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父子组件间怎么进行通讯"文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注行业资讯频道。