vue组件间通信

一.父组件给子组件传值

1.父组件给子组件组件标签上绑定属性名，子组件通过props接收

父组件：
<template>
    <div>
        <son :id="id"/>
    </div>
</template>
<script>
    import son from './components/son.vue'
    export default{
        components:{
            son
        }
        data:{
            return{
                id:1
            }
        }
    }
</script>
子组件：
<template>
    <div>
        {{id}} // 1
    </div>
</template>
<script>
    export default{
        props:['id']
    }
</script>

2.通过给子组件绑定自定义事件的方式传递数据

// 父组件
<template>
    <div>
        <child @getName="getName"><child>
    </div>
</template>
<script>
    import child from './components/child.vue'
    export default{
        methods:{
            getName(name){
                console.log(name)
            }
        }
    }
</script>
// 子组件
<template>
    <div>
        <button type="button" @click="handle"></button>
    </div>
</template>
<script>
    export default{
        data(){
            return {
                name:'zhangsan'
            }
        },
        methods:{
            handle(){
                this.$emit('getName',this.name)
            }
        }
    }
</script>

二.子组件给父组件传值

1.通过参数形式传值

①.在父组件中定义一个方法，给子组件组件标签上绑定这个方法传给子组件

②.再通过子组件用props接收这个方法，就可以调用这个方法，把需要传的数据当作实参传回给父组件

③.父组件接收这个参数

父组件：
<template>
  <div id="app">
    <son :add="add"/>
  </div>
</template>
<script>
    export default{
        data(){
            return{
                list:[1,2,3,4]
            }
        }
        methods:{
			add(x){
				this.list.unshift(x)
			}
		}
    }
</script>
子组件：
<template>
	<div>
		<input type="text" placeholder="请输入任务名称" @keyup.enter="add1">
	</div>
</template>

<script>
	export default{
		methods:{
			add1(e){
				this.add(e.target.value)
			}
		},
		props:['add']
	}
</script>

三.任意组件间通信

1.全局事件总线

①.安装全局事件总线

new Vue({
    ....
    beforeCreate(){
        Vue.prototype.$bus = this 
    }
})

本质就是在Vue实例创建之前把Vue作为在Vue自身的原型上绑定的一个方法，组件间就能调用$on绑定自定义事件，调用$emit触发自定义事件

②.使用

绑定/接收数据：

method(){
    demo(data){...}  
},
mounted(){
    this.$bus.$on('...',this.demo)
}

触发/提供数据：

this.$bus.$emit('...',数据)

 ③.注意事项：最好在beforeDestroy钩子中，用$off解绑当前组件所用到的事件