Vue JS Атрибуты без поддержки и Отключение наследования атрибутов - PullRequest
Новая
       1

Vue JS Атрибуты без поддержки и Отключение наследования атрибутов

2 голосов
/ 30 апреля 2020

Я прочитал документы более 5 раз и до сих пор не могу понять, для чего используется Отключение наследования атрибутов, и я не понимаю приведенный пример.

Я понимаю, как работает реквизит, это передает данные от родительского компонента к дочернему компоненту.

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

Это выведет число 42 и всего 62. Что я прекрасно понимаю.

Однако, когда дело доходит до раздела Отключение наследования атрибутов, по базовому компоненту я предполагаю, что они ссылаются на дочерние компоненты.

" Этот шаблон позволяет вам использовать базовые компоненты, более похожие на необработанные HTML элементы, не заботясь о том, какой элемент фактически находится в его root: "

Что это вообще означает? Означает ли это, что родителю больше не нужно передавать реквизиты ребенку, и ребенок может автоматически подобрать реквизиты у своего родителя, что, честно говоря, не имеет смысла, или вообще отсутствует родительский компонент, они используют только дочерний компонент? ?

Из их примера props: ['label', 'value'], как дочерний компонент получает эти два реквизита, а родительский компонент не передает эти реквизиты им?

Я был бы очень благодарен, если кто-то может использовать вышеприведенную аналогию с родителем и vue, чтобы предоставить простой пример того, что это вообще значит.

Спасибо.

1 Ответ

0 голосов
/ 30 апреля 2020

Отключение наследования атрибутов используется, когда вы не хотите, чтобы html атрибуты, назначенные компоненту, передавались элементу root в компоненте.

Parent. 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 не позволяет компоненту root div наследовать заголовок, назначенный компоненту Child в Parent.vue.

Теперь обратите внимание, как я использую v-bind="$attrs" на h2 в Child.vue. $attrs содержит все атрибуты, которые были бы назначены элементу root div. Теперь атрибуты присваиваются h2, а не div.

inheritAttrs: false не влияет на реквизиты или vue атрибуты, это влияет на обычные html атрибуты. (Это также не влияет на атрибуты style и class)

Базовые компоненты

По "Базовым компонентам" документы в vuejs .org означает такие компоненты, как кнопки, входы и т. Д. c.

Использование 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 и * Атрибуты 1047 * применяются к input в компоненте, а не к label.

...