Vue组件间通信六种方式（完整版）

这里需要注意的是：由于vuex里，我们保存的状态，都是数组，而localStorage只支持字符串，所以需要用JSON转换：

JSON.stringify(state.subscribeList);   // array -> string 
JSON.parse(window.localStorage.getItem("subscribeList"));    // string -> array  

方法四、$attrs/$listeners

1.简介

多级组件嵌套需要传递数据时，通常使用的方法是通过vuex。但如果仅仅是传递数据，而不做中间处理，使用 vuex 处理，未免有点大材小用。为此Vue2.4 版本提供了另一种方法----$attrs/$listeners

• $attrs：包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件。通常配合 interitAttrs 选项一起使用。
• $listeners：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件

接下来我们看个跨级通信的例子：

// index.vue 
<template> 
  <div> 
    <h2>浪里行舟</h2> 
    <child-com1 
      :foo="foo" 
      :boo="boo" 
      :coo="coo" 
      :doo="doo" 
      title="前端工匠" 
    ></child-com1> 
  </div> 
</template> 
<script> 
const childCom1 = () => import("./childCom1.vue"); 
export default { 
  components: { childCom1 }, 
  data() { 
    return { 
      foo: "Javascript", 
      boo: "Html", 
      coo: "CSS", 
      doo: "Vue" 
    }; 
  } 
}; 
</script> 

// childCom1.vue 
<template class="border"> 
  <div> 
    <p>foo: {{ foo }}</p> 
    <p>childCom1的$attrs: {{ $attrs }}</p> 
    <child-com2 v-bind="$attrs"></child-com2> 
  </div> 
</template> 
<script> 
const childCom2 = () => import("./childCom2.vue"); 
export default { 
  components: { 
    childCom2 
  }, 
  inheritAttrs: false, // 可以关闭自动挂载到组件根元素上的没有在props声明的属性 
  props: { 
    foo: String // foo作为props属性绑定 
  }, 
  created() { 
    console.log(this.$attrs); // { "boo": "Html", "coo": "CSS", "doo": "Vue", "title": "前端工匠" } 
  } 
}; 
</script> 

// childCom2.vue 
<template> 
  <div class="border"> 
    <p>boo: {{ boo }}</p> 
    <p>childCom2: {{ $attrs }}</p> 
    <child-com3 v-bind="$attrs"></child-com3> 
  </div> 
</template> 
<script> 
const childCom3 = () => import("./childCom3.vue"); 
export default { 
  components: { 
    childCom3 
  }, 
  inheritAttrs: false, 
  props: { 
    boo: String 
  }, 
  created() { 
    console.log(this.$attrs); // { "boo": "Html", "coo": "CSS", "doo": "Vue", "title": "前端工匠" } 
  } 
}; 
</script> 

// childCom3.vue 
<template> 
  <div class="border"> 
    <p>childCom3: {{ $attrs }}</p> 
  </div> 
</template> 
<script> 
export default { 
  props: { 
    coo: String, 
    title: String 
  } 
}; 
</script> 

如上图所示$attrs表示没有继承数据的对象，格式为{属性名：属性值}。Vue2.4提供了$attrs , $listeners 来传递数据与事件，跨级组件之间的通讯变得更简单。

简单来说：$attrs与$listeners 是两个对象，$attrs 里存放的是父组件中绑定的非 Props 属性，$listeners里存放的是父组件中绑定的非原生事件。

方法五、provide/inject

1.简介

（编辑：我爱故事小小网_铜陵站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!