解决深层次组件间的通信 $attrs, $listeners

最新推荐文章于 2024-06-03 11:47:11 发布

夏天丫丫

最新推荐文章于 2024-06-03 11:47:11 发布

阅读量1.5k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue 数据通信

本文链接：https://blog.youkuaiyun.com/starleejay/article/details/83658277

inheritAttrs

在谈及深层次组件通信之前先说一下 inheritAttrs, 这个属性在官网中是这样解释的：

默认情况下父作用域的不被认作 props 的特性绑定将会 ‘回退’ 且作为普通的 HTML 特性应用在子组件的跟元素上。当撰写包裹一个目标元素或者另一个组件的组件时，这可能不会总是符合预期行为。通过设置 inheritAttrs 为 false, 这些默认行为将会被去掉。而通过实例属性 $attrs 可以让这些特性生效，而且可以通过 v-bind 显性的绑定到非跟元素上。 (注意：这个选项不影响 class 和 style 绑定)

不愧是官方的，看了几遍真的很难理解，还是通过 demo 来看一下吧:

子组件

<template>
   <div>{
  
  {val1}} </div>
</template>
<script>
export default {
  name: "child",
  props: ["val1"]
};
</script>

父组件

<template>
  <div class="hello">
     <child :val1="val1" :val2="val2"></child>
  </div>
</template>

<script>
import Child from "./child";
export default {
  components: {
    Child
  },
  data() {
    return {
      val1: "props val1",
      val2: "props val2"
    };
  }
};
</script>

父组件向子组件传递了 val1 val2 两个参数，但是在子组件内部 props 只接收了一个参数 val1, 并没有接收 val2, 没