Vuejs第十篇之vuejs父子组件通信

本篇文章是小编结合官方文档整理的一套更加细致，代码更多更全的教程，非常不错，比较适合新手阅读。

本篇资料来于官方文档：

父子组件通信

①访问子组件、父组件、根组件；

this.$parent 访问父组件

this.$children 访问子组件（是一个数组）

this.$root 根实例的后代访问根实例

示例代码：

当在子组件的输入框按键弹起时，显示内容依次为：

父组件、父组件的输入框的值（默认情况是1）、0（表示是父组件的children属性中的第一个元素）、true（由于父组件就是根组件，所以是全等的）；

通过这样的方法，可以在组件树中进行互动。

②自定义事件：

首先，事件需要放置在events属性之中，而不是放置在methods属性中（新手很容易犯的错误），只能触发events属性中的事件，而methods属性中的事件是无法触发的。

其次，向上派发和向下广播有所区别：向上派发会触发自身同名事件，而向下广播不会；

第三，向上派发和向下广播默认只会触发直系（子或者父，不包括祖先和孙）的事件，除非事件返回值为true，才会继续在这一条线上继续。

第四，事件不能显式的通过 this.事件名 来调用它。

示例代码：

}
});

说明：

【1】点击父组件的按钮，会向下广播，然后触发子组件1本身，另外一个子组件1，以及另一个子组件2；

【2】点击子组件2的按钮，会触发子组件2的事件和子组件1的事件，但不会触发父组件的按钮；

【3】点击另一个子组件2的按钮，会触发另一个子组件2的事件，另一个子组件1的事件和父组件的事件（因为另一个子组件1的事件的返回值为true）；

③使用v-on绑定自定义事件：

【1】简单来说，子组件触发某个事件（events里的方法）时，父组件也会执行某个方法（父组件methods里的方法）。

【2】触发的绑定写在模板之中（即被替换的那个template模板中），可以多个子组件的事件绑定一个父组件的方法，或者不同子组件的事情绑定不同父组件的方法，但是不能同一个子组件事件绑定多个父组件的方法。

【3】子组件派发消息传递的参数，即使子组件的事件没有参数，也不影响将参数传递给父组件的方法（即父组件的方法可以接受到子组件方法获取的参数）

如示例：

④子组件索引

简单来说：就是可以直接从索引获取到子组件，然后就可以调用各个子组件的方法了。

添加索引方法是：在标签里添加v-ref:索引名

调用组件方法是：vm.$ref.索引名

也可以直接在父组件中使用this.$ref.索引名

这个时候，就可以获得组件了，然后通过组件可以调用他的方法，或者是使用其数据。

示例代码：

以上所述是小编给大家介绍的Vuejs第十篇之vuejs父子组件通信。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!