一、自定義組件使用v-model實(shí)現(xiàn)雙休數(shù)據(jù)綁定

前面的課程我們給大家講過v-model，v-model主要用于表單的雙休數(shù)據(jù)綁定?，F(xiàn)在給大家講解一下v-model實(shí)現(xiàn)自定義組件的雙休數(shù)據(jù)綁定。

1.1、單個(gè)v-mode數(shù)據(jù)綁定

默認(rèn)情況下，組件上的 v-model 使用 modelValue 作為 prop 和 update:modelValue 作為事件。我們可以通過向 v-model 傳遞參數(shù)來修改這些名稱：

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

在本例中，子組件將需要一個(gè) foo prop 并發(fā)出 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)">
  `
})

1.2、多個(gè) v-model 綁定

通過利用以特定 prop 和事件為目標(biāo)的能力，正如我們之前在 v-model 參數(shù)中所學(xué)的那樣，我們現(xiàn)在可以在單個(gè)組件實(shí)例上創(chuàng)建多個(gè) v-model 綁定。

每個(gè) v-model 將同步到不同的 prop，而不需要在組件中添加額外的選項(xiàng)。

<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 實(shí)現(xiàn)了一套內(nèi)容分發(fā)的 API，這套 API 的設(shè)計(jì)靈感源自 Web Components 規(guī)范草案，將 <slot> 元素作為承載分發(fā)內(nèi)容的出口。

1、自定義一個(gè)按鈕組件

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

<script>
export default {

}
</script>

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

2、調(diào)用這個(gè)組件

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

slot還允許在自定義組件里面?zhèn)魅肴我獾膆tml標(biāo)簽,或者其他組件

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

slot中還可以綁定父組件的數(shù)據(jù)

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

三、slots默認(rèn)值

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

<submit-button></submit-button>

“Submit”將會被渲染為：

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

五、Vue3.x非 Prop 的Attribute 繼承

一個(gè)非 prop 的 attribute 是指傳向一個(gè)組件，但是該組件并沒有相應(yīng) props 或 emits 定義的 attribute。常見的示例包括 class、style 和 id 屬性。

2.1、當(dāng)組件返回單個(gè)根節(jié)點(diǎn)時(shí)，非 prop attribute 將自動添加到根節(jié)點(diǎn)的 attribute 中。

如：

子組件DatePicker.vue

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

<script>
export default {

}
</script>

父組件：

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

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

渲染完成的效果：

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

2.2、同樣的規(guī)則適用于事件監(jiān)聽器：

父組件:

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

子組件：

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

2.3、完整示例：

子組件DatePicker.vue

<template>
    ?<select>
        <option value="1">Yesterday</option>

        <option value="2">Today</option>

        <option value="3">Tomorrow</option>
    </select>
</template>

父組件

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

methods: {
    showChange(event) {
      console.log(event.target.value) // 獲取子組件選擇的值
    }
 }

六、自定義 Attribute 繼承

如果你不希望組件的根元素繼承 attribute，你可以在組件的選項(xiàng)中設(shè)置 inheritAttrs: false。例如：

禁用 attribute 繼承的常見情況是需要將 attribute 應(yīng)用于根節(jié)點(diǎn)之外的其他元素。

通過將 inheritAttrs 選項(xiàng)設(shè)置為 false，你可以訪問組件的 $attrs property，該 property 包括組件 props 和 emits property 中未包含的所有屬性 (例如，class、style、v-on 監(jiān)聽器等)。

子組件：

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

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

        }
    }
}
</script>

父組件：

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

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

渲染完成的效果：

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

七、多個(gè)根節(jié)點(diǎn)上的 Attribute 繼承

與單個(gè)根節(jié)點(diǎn)組件不同，具有多個(gè)根節(jié)點(diǎn)的組件不具有自動 attribute 回退行為。如果未顯式綁定 $attrs，將發(fā)出運(yùn)行時(shí)警告。

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

// 這將發(fā)出警告
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>
  `
})