vue组件通信

vue是单向数据流

①props / $emit

父组件通过props的方式向子组件传递数据，而通过$emit子组件可以向父组件通信。

②$children / $parent

this.$children[0].msg = “hello world” //父组件修改子组件data中的数据

this.$parent.mag //子组件拿到父组件data中的数据

$children的值是数组，$parent的值是个对象

注意：$parent，$children它们的目的是作为访问数组的应急方法，更推荐用props和events实现父子组件通信。

③provide / inject

这是vue2.2.0新增的api，简单来说就是父组件中通过provide来提供变量，然后再子组件中通过inject来注入变量。

//父组件

export default{
name:“A”,

provide:{
    for:"demo"

},

components:{
    comB

}

}

//子组件

export default{
name:“B”,

inject:["for"],

data(){
    demo:this.for

}

}

④ref / refs

ref：如果在普通的DOM元素上使用，引用指向的就是DOM元素；如果用在子组件上，引用就指向组件实例，可通过实例直接调用组件的方法或访问数据。

//父组件

<component-a ref="comA"></component-a>

//子组件

export default{
data(){
return {
name:“Vue.js”

    }

},

methods:{
    sayHello(){
        console.log("hello")

    }

}

}

⑤eventBus(Bus总线)：

//首先在src中创建一个Bus文件夹 => index.js

import Vue from “vue”;

export default new Vue({

})

//子组件1(发送数据的组件)

<button @click=“add()”>点击

import Bus from “@/Bus”

add(){
Bus.$emit(“add”,this.content);

}

//子组件2(接受数据的组件)

{{tit}}

import Bus from “@/Bus”;

created(){
Bus.$on(“add”,(data) => {
this.tit = data;

})

}

⑥Vuex；

⑦LocalStorage；

⑧$attrs / $listeners

 将数据挂在到子组件的标签上去后，在子组件中使用this.$attrs直接获取到所有挂载的数据，返回的是一个对象。