Vue JS 非 prop 属性和禁用属性继承答案

【问题标题】：Vue JS Non prop attributes and Disabling Attribute InheritanceVue JS 非 prop 属性和禁用属性继承
【发布时间】：2020-08-14 08:40:06
【问题描述】：

我已阅读文档超过 5 次，但我仍然无法理解禁用属性继承的用途，也无法理解给出的示例。

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

父.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>

Child.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，total 为 62。我完全理解。

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

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

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

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

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

谢谢。

【问题讨论】：

标签： javascript vue.js vue-props

【解决方案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>

Child.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 继承分配给Parent.vue 中Child 组件的标题。

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

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

基础组件

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

使用inheritAttrs: 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>

这意味着placeholder 和required 属性应用于组件中的input 而不是label。

【讨论】：

感谢您对我的问题的解释和努力，但我仍然不明白。对于第一个例子，我想看到什么？这就是我得到的
Child
尽管 inheritAttrs 是假的或真的。对于第二个例子，我完全迷失了。标签和值是如何传递给基本输入组件的，为什么在父组件上没有自定义事件，因为您正在从子组件发出自定义事件。不应该是这样
@desh 当 inheritAttrs 是 false 时，检查 Child.vue 中的 div 与 inheritAttrs 是 true 时的情况。当inheritAttrs 是false 时，div 不会有title="I am the child" 至于解释第二个示例的工作原理，请查看vuejs.org/v2/guide/components.html#Using-v-model-on-Components

【解决方案2】：

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

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

渲染时，可能会扩展为

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

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

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

仅此而已。

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

【讨论】：

【解决方案3】：

要补充的东西

如果你在一个组件中有多个非prop属性和多个根节点，并且非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>

【讨论】：