8

我已经阅读了 5 遍以上的文档，但仍然无法理解禁用属性继承的用途，也无法理解给出的示例。

我了解道具的工作原理，它将数据从父组件传递到子组件。

父.vue

<template>
  <div id="app">
    <Child :num="num"></Child>
  </div>
</template>

<script>
import Child from "@/components/Child";
export default {
  name: "App",
  components: {
   Child
  },
  data() {
    return {
      num: 42
    };
  }
};
</script>

孩子.vue

<template>
  <div>
    <h2>Child</h2>
    <h4>num is {{num}}</h4>
    <div id="total">
      <h4>total is {{total}}</h4>
    </div>
  </div>
</template>
<script>
export default {
  name: "Child",
  props: {
    num: {
      type: Number,
      default: 100
    }
  },
  data() {
    return {

    };
  },
  computed: {
    total() {
      return this.num + 20;
    }
  }
};
</script>

这将输出 num 为 42，总数为 62。我完全理解。

但是，当涉及到禁用属性继承部分时，我假设它们指的是子组件。

“这种模式让您可以像使用原始 HTML 元素一样使用基本组件，而不必关心哪个元素实际上位于其根部：”

这甚至意味着什么？这是否意味着父母不必再将道具传递给孩子，孩子可以自动从其父母那里获取道具，坦率地说这没有意义或者完全没有父组件，他们只使用子组件?

从他们的例子中， props: ['label' , 'value'] ，如果父组件没有将这些 props 传递给它们，子组件如何接收这两个 props？

如果有人可以使用上面的 parent 和 vue 组件类比来提供一个简单的例子来说明这甚至意味着什么，我将非常感激。

谢谢你。

4

3 回答 3

1

当您不希望将分配给组件的 html 属性传递给组件中的根元素时，可以使用禁用属性继承。

父.vue

<template>
  <div id="app">
    <Child title="I am the child"></Child>
  </div>
</template>

<script>
import Child from "@/components/Child";
export default {
  name: "App",
  components: {
   Child
  }
};
</script>

孩子.vue

<template>
  <div>
    <h2 v-bind="$attrs">Child</h2> <!-- This h2 will inherit all the html attributes -->
  </div>
</template>
<script>
export default {
  inheritAttrs: false, // This is what disables attribute inheritance
  name: "Child"
};
</script>

inheritAttrs: false防止根组件继承div分配给.ChildParent.vue

现在注意我是如何在in上使用v-bind="$attrs"的。包含将分配给根元素的所有属性。现在属性被分配给而不是。h2Child.vue$attrsdivh2div

inheritAttrs: false不影响 props 或 vue 属性，它会影响正常的 html 属性。（它也不影响style和class属性）

基础组件

vuejs.org上的文档中的“基本组件”是指按钮、输入等组件。

usinginheritAttrs: false对于输入组件非常有用：

<template>
  <label>
    {{ label }}
    <input
      v-bind="$attrs"
      v-bind:value="value"
      v-on:input="$emit('input', $event.target.value)"
    >
  </label>
</template>

<script>
export default {
  name: 'base-input',
  inheritAttrs: false,
  props: ['label', 'value'],
}
</script>

这允许您执行以下操作：

<base-input
  v-model="username"
  required
  placeholder="Enter your username"
></base-input>

这意味着placeholderandrequired属性应用于input组件中的而不是label.

于 2020-04-30T04:31:28.357 回答
1

如果你把一个随机的 html 属性放到组件上，它就会出现在渲染的组件上。如果禁用继承，则不会。

<my-component dorkus="whatever"></my-component>

渲染时，可能会扩展为

<div dorkus="whatever"> ... stuff ... </div>

但如果你设置inheritAttrs: false，它看起来像

<div> ... stuff ... </div>

这里的所有都是它的。

dorkus="whatever" 仍然存储在 $attrs 对象中，如果我们想用它做其他事情。

于 2020-09-25T11:52:12.553 回答
0

要补充的东西

如果你在一个组件中有多个 non-prop 属性和多个根节点，并且 non-prop 属性用于不同的元素，你可以像这样绑定它们

<mycomponent
  data-haha="haha"
  data-hehe="hehe">
</mycomponent>

// in the component
template: `
  <p v-bind:data-yoyo="$attrs['data-haha']">only data-haha is used, and attribute data-haha renamed to data-yoyo</p>
  <p v-bind="$attrs">all attributes here</p>
`

呈现的 HTML

<p data-yoyo="haha">only data-haha is used, and attribute data-haha renamed to data-yoyo</p>
<p data-haha="haha" data-hehe="hehe">all attributes here</p>
于 2020-10-26T06:17:51.867 回答