Vue父子组件通信的3种形式

15195775117

需求缘起：


我们在一个网站选择数据的时候，
省-市-县-站的选择控件是一个独立组件，
日期时间的选择控件是一个独立组件，
还有数据的类型、呈现方式等，都是独立组件，


父组件随时获得子组件的状态是不可或缺的，
子组件及时反馈状态，调整展示也是必不可少的。


父子组件的通信分3种形式：


1、父组件主动向子组件传递数据：


在子组件设置props，父组件以插槽形式调用子组件时，可赋值。


2、子组件主动向父组件传递数据：


在子组件写一个函数，向父组件发送信息：
sendMsgToParent:function(){
this.$emit("listenToChildEvent","xxxxxxxxxxxooooooooooo");}
在父组件引用子组件的插槽中设置一个监听函数：
<checkbox0 ref="refname" v-on:listenToChildEvent="getMsgFromChild"></checkbox0>
监听函数：
getMsgFromChild:function(data){console.log(data);}
注意：父子组件都用了listenToChildEvent


3、父组件主动抓取子组件的数据


注意这与2是不同的，2是子组件主动发送，3是父组件索取的。
父组件引用子组件时，使用ref属性：
<checkbox0 ref="refname" v-on:listenToChildEvent="getMsgFromChild"></checkbox0>
在网页加载好时，获得子组件的对象，
子组件变量"checked2"的提取方法如下：
mounted(){
this.child = this.$refs.refname
console.log('从子组件抓的数据:',this.child.checked2)
}