在自定义组件上使用 v-model 、插槽 slots 、非 Prop 的 Attribute 继承 、自定义 Attribute 继承

在自定义组件上使用 v-model

单个 v-mode 的数据绑定

默认情况下，组件上的 v-model 使用 modelValue 作为 prop 和 update:modelValue 作为事件。我们可以通过向 v-model 传递参数来修改这些名称

<my-component v-model:foo="bar"></my-component>

在本例中，子组件将需要一个 foo prop 并发出 update:foo 同步事件

const app = Vue.createApp({})

app.component('my-component', {
  props: {
    foo: String
  },
  template: `
    <input
      type="text"
      :value="foo"
      @input="$emit('update:foo', $event.target.value)">`
})

多个 v-model 绑定

通过利用以特定 prop 和事件为目标的能力，正如我们之前在 v-model 参数中所学的那样，我们现在可以在单个组件实例上创建多个 v-model 绑定。每个 v-model 将同步到不同的 prop ，而不需要在组件中添加额外的选项

<user-name
  v-model:first-name="firstName"
  v-model:last-name="lastName"
></user-name>

const app = Vue.createApp({})

app.component('user-name', {
  props: {
    firstName: String,
    lastName: String
  },
  template: `
    <input
      type="text"
      :value="firstName"
      @input="$emit('update:firstName', $event.target.value)">

    <input
      type="text"
      :value="lastName"
      @input="$emit('update:lastName', $event.target.value)">`
})

自定义组件 slots

vue 实现了一套内容分发的 API ，这套 API 的设计灵感源自 Web Components 规范草案，将 <slot> 元素作为承载分发内容的出口。示例

1. 自定义一个按钮组件

<script>
  export default {}
</script>

<template>
  <button class="btn-primary">
    <slot></slot>
  </button>
</template>

<style lang="scss">
  .btn-primary {
    padding: 5px 10px;
    background: orange;
    color: #fff;
    border: none;
  }
</style>

2、调用这个组件

<v-button class="btn-primary">登录</v-button>

slot 还允许在自定义组件里面传入任意的 html 标签，或者其他组件

<v-button class="btn-primary">
  <i>Icon</i> 登录
</v-button>

slot 中还可以绑定父组件的数据

<v-button class="btn-primary">
  <i>Icon</i> 登录
  {{ title }}
</v-button>

slots 默认值

<button type="submit">
  <slot>Submit</slot>
</button>

<submit-button></submit-button>

“Submit” 将会被渲染为

<button type="submit">
  Submit
</button>

非 Prop 的 Attribute 继承

一个非 prop 的 attribute 是指传向一个组件，但是该组件并没有相应 props 或 emits 定义的 attribute 。常见的示例包括 class、style 和 id 属性。例如

当组件返回单个根节点时，非 prop attribute 将自动添加到根节点的 attribute 中

1. DatePicker.vue

<script>
  export default {}
</script>

<template>
  <div class="date-picker">
    <input type="date" />
  </div>
</template>

2. 父组件

<script>
  import DatePicker from "./components/DatePicker.vue"
  export default {
    data() {
      return {
        title: "你好vue"
      }
    },
    components: {
      DatePicker
    }
  }
</script>

<template>
  <date-picker data-status="activated"></date-picker>
</template>

渲染完成的效果

<div class="date-picker" data-status="activated">
  <input type="datetime" />
</div>

同样的规则适用于事件监听器

1. 父组件

<date-picker @change="submitChange"></date-picker>

2. 子组件

mounted() {
  console.log(this.$attrs) // { onChange: () => {}  }
}

3. 完整示例

• 子组件 DatePicker.vue

<script>
  export default {}
</script>

<template>
  <select>
    <option value="1">Yesterday</option>
    <option value="2">Today</option>
    <option value="3">Tomorrow</option>
  </select>
</template>

• 父组件

<script>
  import DatePicker from "./components/DatePicker.vue"
  export default {
    data() {
      return {
        title: "你好vue"
      }
    },
    components: {
      DatePicker
    },
    methods: {
      showChange(event) {
        console.log(event.target.value) // 获取子组件选择的值
      }
    }
  }
</script>

<template>
  <date-picker @change="showChange"></date-picker>
</template>

自定义 Attribute 继承

如果你不希望组件的根元素继承 attribute ，你可以在组件的选项中设置 inheritAttrs: false 。
禁用 attribute 继承的常见情况是需要将 attribute 应用于根节点之外的其他元素。
通过将 inheritAttrs 选项设置为 false，你可以访问组件的 $attrs property，该 property 包括组件 props 和 emits property 中未包含的所有属性 (例如 class 、style 、v-on 监听器等)。

1. 子组件

<script>
export default {
  inheritAttrs: false,
  data() {
      return {
      }
    }
  }
</script>

<template>
  <div class="date-picker">
    <input type="date" v-bind="$attrs" />
  </div>
</template>

2. 父组件

<script>
  import DatePicker from './components/DatePicker.vue'
  export default {
    data() {
      return {
        title: "你好vue"
      }
    },
    components: {
      DatePicker
    }
  }
</script>

<template>
  <date-picker data-status="activated"></date-picker>
</template>

渲染完成的效果：

<div class="date-picker">
  <input type="datetime" data-status="activated" />
</div>

多个根节点上的 Attribute 继承

与单个根节点组件不同，具有多个根节点的组件不具有自动 attribute 回退行为。如果未显式绑定 $attrs，将发出运行时警告。

<custom-layout id="custom-layout" @click="changeValue"></custom-layout>

// 这将发出警告：
app.component('custom-layout', {
  template: `
    <header>...</header>
    <main>...</main>
    <footer>...</footer>
  `
})

// 没有警告，$attrs 被传递到 <main> 元素
app.component('custom-layout', {
  template: `
    <header>...</header>
    <main v-bind="$attrs">...</main>
    <footer>...</footer>
  `
})