【Vue】父子组件之间的多种通讯方法，简单易用

父组件传值到子组件

方法一、父组件的数据直接绑定到子组件上面，在子组件就可以通过页面的props直接用父组件的数据了

注意：这种方法是单向绑定，子组件不能改变父组件的值

父组件传递

<video-tips :videotipobj="videotipobj"></video-tips>

子组件接收

props: {
	  videotipobj: {}
},

方法二、父组件和子组件之间通过v-model实现数据的双向绑定

注意：这种方法是双向绑定，子组件和父组件的值相同(Vue 2.0不支持这种方式)

父组件传递

<video-tips v-model="videotipobj"></video-tips>

子组件接收

props: {
	  videotipobj: {}
},

方法三、通过方法的监听，实现父子组件之间的数组通讯和数据双向绑定

注意：推荐使用这种方法

父组件

<video-tips :videotipobj="videotipobj" @videotiofn="videotiofn"></video-tips>

data(){
    return:{
        videotipobj:"666"
    }
},
methods: {
    videotiofn(data){
		console.log(data)
	},
}

子组件

<div @click="childfn"></div>

props: {
	videotipobj:"",
},
data(){
    
},
methods:{
    childfn(){
        this.videotipobj = 777;
        //通知，并传递数据到父组件
        this.$emit("videotiofn",this.videotipobj); 
    }
}