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

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

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

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

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

在本例中,，子組件將需要一個 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,、多個 v-model 綁定

通過利用以特定 prop 和事件為目標的能力，正如我們之前在 v-model 參數(shù)中所學的那樣,，我們現(xiàn)在可以在單個組件實例上創(chuàng)建多個 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 實現(xiàn)了一套內(nèi)容分發(fā)的 API，這套 API 的設計靈感源自 Web Components 規(guī)范草案,，將 <slot> 元素作為承載分發(fā)內(nèi)容的出口,。

1、自定義一個按鈕組件

<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)用這個組件

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

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

<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默認值

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

<submit-button></submit-button>

“Submit”將會被渲染為：

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

五、Vue3.x非 Prop 的Attribute 繼承

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

2.1,、當組件返回單個根節(jié)點時，非 prop attribute 將自動添加到根節(jié)點的 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,，你可以在組件的選項中設置 inheritAttrs: false,。例如：

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

通過將 inheritAttrs 選項設置為 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>

七,、多個根節(jié)點上的 Attribute 繼承

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

<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>
  `
})