脚本宝典收集整理的这篇文章主要介绍了

vue组件之间通信实录

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

1、在vue中父组件是通过props传递数据给子组件

<child-component :prop1="父组件的数据1" :prop2="父组件的数据2"></child-component>

子组件只接受在子组件中定义过的props的值,

Vue.component('child-component', {   props: ['prop1', 'prop2'], // 定义接收哪些 props   template: '<div>{{prop1 + prop2}}</div>',   ... }

2、父组件调用子组件属性或方法
首先在组件的根元素上通过ref给取个名字,例如:

<child-component ref="aName"></child-component>

然后父组件就可以通过该名称获取到这个组件对象,从而调用里面的属性与方法:

var comp = this.$refs.name; name.attr; name.method();

父组件可以通过$children,获取到所有的直接子组件,不包括孙组件;不保证顺序,不是响应式的

3、子组件传递数据给父组件----自定义事件
父组件通过v-on在子组件使用的地方监听子组件触发的事件: