Vue3父子組件間通信和組件間雙向綁定怎么實現(xiàn)

本篇內(nèi)容主要講解“Vue3父子組件間通信和組件間雙向綁定怎么實現(xiàn)”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“Vue3父子組件間通信和組件間雙向綁定怎么實現(xiàn)”吧!

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、重慶小程序開發(fā)、集團企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了蘆溪免費建站歡迎大家使用！

假如確要修改，可以使用下面說的方式進行通信：
首先，在子組件的UI點擊回調(diào)方法中，調(diào)用this.$emit('【自己設(shè)置事件名】')，
向外發(fā)送一個事件；

接著各級父組件會收到這個事件，
則在父組件中調(diào)用子組件標簽處，
以 @【事件名】= "回調(diào)方法名"的形式，監(jiān)聽該事件以及配置回調(diào)方法；
回調(diào)方法中就可對子組件用意修改的父組件數(shù)據(jù)字段進行修改；

注意，
觸發(fā)事件的命名，用駝峰命名法（如下heHeDa）；
監(jiān)聽事件的命名，用橫桿間隔法（如下he-he-da）。

代碼：

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Hello World! heheheheheheda</title>    <script src="https://unpkg.com/vue@next"></script></head><body>    <div id="heheApp"></div></body><script>    const app = Vue.createApp({        data() {            return {count: 1}        },        methods: {            handleItemEvent() {                this.count += 1;            }        },        template: `        <div>            <counter :count="count" @he-he-da="handleItemEvent"/>        </div>`    });    app.component('counter', {        props: ['count'],        methods: {            handleItemClick() {                this.$emit('heHeDa');            }        },        template:`        <div @click="handleItemClick">{{count}}</div>        `    });    const vm = app.mount('#heheApp');</script></html>

運行，點擊組件： Vue3父子組件間通信和組件間雙向綁定怎么實現(xiàn)

攜帶參數(shù)的事件發(fā)送和監(jiān)聽回調(diào)

this.$emit()可以增加參數(shù)位，
父組件的監(jiān)聽回調(diào)中，
則可加形參位用于接收參數(shù)（如handleItemEvent(param)中的 param）；

代碼：

<script>    const app = Vue.createApp({        data() {            return {count: 1}        },        methods: {            handleItemEvent(param) {                this.count += param;            }        },        template: `        <div>            <counter :count="count" @add-count="handleItemEvent"/>        </div>`    });    app.component('counter', {        props: ['count'],        methods: {            handleItemClick() {                this.$emit('addCount', 8);            }        },        template:`        <div @click="handleItemClick">{{count}}</div>        `    });    const vm = app.mount('#heheApp');</script>

運行，點擊效果：

Vue3父子組件間通信和組件間雙向綁定怎么實現(xiàn)
子組件需發(fā)送多個參數(shù) 亦可，只需在this.$emit()按需增加參數(shù)位，
父組件的監(jiān)聽回調(diào)中，增加對應(yīng)的形參去接收就可：

<script>    const app = Vue.createApp({        data() {            return {count: 1}        },        methods: {            handleItemEvent(param1, param2, param3) {                this.count = this.count + param1 + param2 + param3;                console.log(this.count);            }        },        template: `        <div>            <counter :count="count" @add-count="handleItemEvent"/>        </div>`    });    app.component('counter', {        props: ['count'],        methods: {            handleItemClick() {                this.$emit('addCount', 8, 2, 6);            }        },        template:`        <div @click="handleItemClick">{{count}}</div>        `    });    const vm = app.mount('#heheApp');</script>

效果： Vue3父子組件間通信和組件間雙向綁定怎么實現(xiàn)

當然父組件接收子組件參數(shù) 后的計算邏輯，
可以在子組件傳參的時候計算完成再傳給this.$emit()！
父組件接收時，直接受值就可（handleItemEvent(count)）；

<script>    const app = Vue.createApp({        data() {            return {count: 1}        },        methods: {            handleItemEvent(count) {                this.count = count;                console.log(this.count);            }        },        template: `        <div>            <counter :count="count" @add-count="handleItemEvent"/>        </div>`    });    app.component('counter', {        props: ['count'],        methods: {            handleItemClick() {                this.$emit('addCount', this.count + 16);            }        },        template:`        <div @click="handleItemClick">{{count}}</div>        `    });    const vm = app.mount('#heheApp');</script>

效果同上一個例子；

使用組件的`emits`板塊整理組件事件

實際開發(fā)場景中，我們一個組件自己設(shè)置的觸發(fā)事件可能會很多，
我們不可能一個一個去梳理核實，
這個時候即可以使用組件的emits板塊來整理組件的事件；

可以把組件中 自己設(shè)置到的事件都寫在這里，方便梳理，提高可讀性，
或者者把 想要定義的事件 寫在這里，
如此一來，假如不記得編寫對應(yīng)的自己設(shè)置事件，
Vue系統(tǒng)會在運行時給予警告：

<script>    const app = Vue.createApp({        data() {            return {count: 1}        },        methods: {            handleItemEvent(count) {                this.count = count;                console.log(this.count);            }        },        template: `        <div>            <counter :count="count" @add-count="handleItemEvent"/>        </div>`    });    app.component('counter', {        props: ['count'],        emits: ['hehehe'],        methods: {            handleItemClick() {                this.$emit('addCount', this.count + 16);            }        },        template:`        <div @click="handleItemClick">{{count}}</div>        `    });    const vm = app.mount('#heheApp');</script>

假如不記得編寫對應(yīng)的自己設(shè)置事件，Vue系統(tǒng)會在運行時給予警告：

Vue3父子組件間通信和組件間雙向綁定怎么實現(xiàn)

使用組件`emits`板塊的 `Object`形式校驗外傳的參數(shù)值

可以根據(jù)需要，使用組件emits板塊的 Object形式校驗外傳的參數(shù)值，
如下，子組件的emits板塊，
‘key’值定義對應(yīng)的事件名，‘value’值定義一個校驗函數(shù)，

返回true表示同意數(shù)值外傳，
返回false表示不同意，會給出警告；

<script>    const app = Vue.createApp({        data() {            return {count: 1}        },        methods: {            handleItemEvent(count) {                this.count = count;                console.log(this.count);            }        },        template: `        <div>            <counter :count="count" @add-count="handleItemEvent"/>        </div>`    });    app.component('counter', {        props: ['count'],        emits: {            addCount: (count) => {                if (count < 0) {                    return true;                }                return false;            }        },        methods: {            handleItemClick() {                this.$emit('addCount', this.count + 16);            }        },        template:`        <div @click="handleItemClick">{{count}}</div>        `    });    const vm = app.mount('#heheApp');</script>

運行，點擊效果： Vue3父子組件間通信和組件間雙向綁定怎么實現(xiàn)

結(jié)合`$emit`、`v-bind`與`v-model` 實現(xiàn) 父子組件通信（數(shù)據(jù)雙向綁定）

v-model可以實現(xiàn)數(shù)據(jù)字段與DOM節(jié)點內(nèi)容的雙向綁定，
也可以實現(xiàn)數(shù)據(jù)字段與數(shù)據(jù)字段之間的雙向綁定；
而v-bind只能是實現(xiàn)單向數(shù)據(jù)流；

若不自己設(shè)置承接的字段名，則需要用modelValue作為默認的承接字段名；
同時，$emit()的一參默認為update:modelValue，二參為綁定的數(shù)據(jù)；

如下代碼，
子組件的承接變量modelValue 同父組件的count字段雙向綁定，
（實際上就是v-model的特性 —— 將子組件的內(nèi)容即modelValue 同父組件的數(shù)據(jù)字段雙向綁定）
而后顯示在子組件的DOM中（{{modelValue}}）：

<script>    const app = Vue.createApp({        data() {            return {count: 1}        },        template: `            <counter v-model="count"/>`    });    app.component('counter', {        props: ['modelValue'],        methods: {            handleItemClick() {                this.$emit('update:modelValue', this.modelValue + 16);                console.log(vm.$data.count);            }        },        template:`        <div @click="handleItemClick">{{modelValue}}</div>        `    });    const vm = app.mount('#heheApp');</script>

效果： Vue3父子組件間通信和組件間雙向綁定怎么實現(xiàn)

當然也可以自己設(shè)置字段名，
這種方式需要給v-model字段接一個字段名，
同時將這個字段名替代子組件中所有modelValue的位置：

<script>    const app = Vue.createApp({        data() {            return {count: 1}        },        template: `            <counter v-model:testField="count"/>`    });    app.component('counter', {        props: ['testField'],        methods: {            handleItemClick() {                this.$emit('update:testField', this.testField + 16);                console.log(vm.$data.count);            }        },        template:`        <div @click="handleItemClick">{{testField}}</div>        `    });    const vm = app.mount('#heheApp');</script>

實現(xiàn)效果與上例相同；

結(jié)合`$emit`、`v-bind`與`v-model` 實現(xiàn) 父子組件通信（多個字段的應(yīng)用案例）

如下代碼，
父組件的count與子組件承接的testField字段，
父組件的count1與子組件承接的testField1字段，
分別實現(xiàn)了雙向綁定：

<script>    const app = Vue.createApp({        data() {            return {                count: 1,                count1: 1            }        },        template: `            <counter v-model:testField="count" v-model:testField1="count1"/>`    });    app.component('counter', {        props: ['testField','testField1'],        methods: {            handleItemClick() {                this.$emit('update:testField', this.testField + 16);                console.log("vm.$data.count", vm.$data.count);            },            handleItemClick1() {                this.$emit('update:testField1', this.testField1 + 8);                console.log("vm.$data.count1", vm.$data.count1);            }        },        template:`        <div @click="handleItemClick">{{testField}}</div>        <div @click="handleItemClick1">{{testField1}}</div>        `    });    const vm = app.mount('#heheApp');</script>

效果： Vue3父子組件間通信和組件間雙向綁定怎么實現(xiàn)

自己設(shè)置修飾符

機制：在父組件調(diào)用處，在v-model后使用自己設(shè)置修飾符，
在實現(xiàn)修飾符邏輯的地方，如點擊事件中，
通過this.modelModifiers.[自己設(shè)置修飾符名]返回的布爾值，
判斷客戶能否使用了修飾符，
進而分別對使用與否做相應(yīng)的解決；
另外'modelModifiers'板塊中可以指定默認值（下代碼指定為一個空對象{}）；

試驗this.modelModifiers的作用

首先下面是一個空的解決，'modelModifiers'板塊中指定默認值（下代碼指定為一個空對象{}），
mounted函數(shù)中打印子組件modelModifiers屬性的內(nèi)容，

代碼如下，
運行后，可以見打印了一個對象{captalize: true}，
正是我們傳入的自己設(shè)置修飾符.captalize（這里未做解決）
【假如這里v-model不接修飾符，
console.log(this.modelModifiers);將打印一個空對象{}】：

<script>    const app = Vue.createApp({        data() {            return {                char: 'a'            }        },        template: `            <counter v-model.captalize="char"/>`    });    app.component('counter', {        props: {            'modelValue': String,            'modelModifiers': {                default: () => ({})            }        },        mounted() {            console.log(this.modelModifiers);        },        methods: {            handleClick() {                this.$emit('update:modelValue', this.modelValue + 'h');                console.log("vm.$data.count", vm.$data.char);            }        },        template:`        <div @click="handleClick">{{modelValue}}</div>        `    });    const vm = app.mount('#heheApp');</script>

Vue3父子組件間通信和組件間雙向綁定怎么實現(xiàn)

下面在子組件的點擊回調(diào)`handleClick()`中，通過`this.modelModifiers.[自己設(shè)置修飾符名]`實現(xiàn)自己設(shè)置修飾符邏輯

實現(xiàn)效果即點擊之后使得對應(yīng)的字符串全變大寫；

<script>    const app = Vue.createApp({        data() {            return {                testString: 'a'            }        },        template: `            <counter v-model.heheda="testString"/>`    });    app.component('counter', {        props: {            'modelValue': String,            'modelModifiers': {                default: () => ({})            }        },        mounted() {            console.log(this.modelModifiers);        },        methods: {            handleClick() {                let newValue = this.modelValue + 'h';                if(this.modelModifiers.heheda) {                    newValue = newValue.toUpperCase();                }                this.$emit('update:modelValue', newValue);                console.log("vm.$data.count", vm.$data.testString);            }        },        template:`        <div @click="handleClick">{{modelValue}}</div>        `    });    const vm = app.mount('#heheApp');</script>

效果：

Vue3父子組件間通信和組件間雙向綁定怎么實現(xiàn)

插槽【slot】【傳組件示例】

使用關(guān)鍵主要分兩個部分：
自己設(shè)置子組件：
在需要被父組件插入組件的位置，
使用<slot></slot>標簽對臨時占位；

父組件：
在調(diào)用子組件標簽對時，
往子組件標簽對 間
寫上要替換子組件標簽對中<slot></slot>位置的組件

【slot】的出現(xiàn)，
方便父子組件之間數(shù)據(jù)的傳遞，
方便DOM的傳遞；

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Hello World! heheheheheheda</title>    <script src="https://unpkg.com/vue@next"></script></head><body>    <div id="heheApp"></div></body><script>    const app = Vue.createApp({        template: `            <myform>                <div>提交</div>            </myform>            <myform>                <button>提交</button>            </myform>`    });    app.component('myform', {        template:`        <div>            <input />            <slot></slot>            <br><br>        </div>        `    });    const vm = app.mount('#heheApp');</script></html>

運行效果： Vue3父子組件間通信和組件間雙向綁定怎么實現(xiàn)

注意，slot標簽上是無法直接增加事件（修飾符）的，如有需要，可以在<slot>外層包裹一層<span>標簽，再加上事件

<script>    const app = Vue.createApp({        template: `            <myform>                <div>提交</div>            </myform>            <myform>                <button>提交</button>            </myform>`    });    app.component('myform', {        methods: {            handleClick() {                console.log("heheda!!===");            }        },        template:`        <div>            <input />            <span @click="handleClick">                <slot></slot>            </span>                <br><br>        </div>        `    });    const vm = app.mount('#heheApp');</script>

運行，點擊提交文本或者按鈕： Vue3父子組件間通信和組件間雙向綁定怎么實現(xiàn)

插槽【傳字符串示例】

<script>    const app = Vue.createApp({        template: `            <myform>                66666            </myform>            <myform>                88888            </myform>`    });    app.component('myform', {        methods: {            handleClick() {                console.log("heheda!!===");            }        },        template:`        <div>            <input />            <span @click="handleClick">                <slot></slot>            </span>                <br><br>        </div>        `    });    const vm = app.mount('#heheApp');</script>

Vue3父子組件間通信和組件間雙向綁定怎么實現(xiàn)

插槽【傳自己設(shè)置子組件示例】

<script>    const app = Vue.createApp({        template: `            <myform>                <test />            </myform>            <myform>                88888            </myform>`    });    app.component('test', {        template: `<div>test component</div>`    })    app.component('myform', {        methods: {            handleClick() {                console.log("heheda!!===");            }        },        template:`        <div>            <input />            <span @click="handleClick">                <slot></slot>            </span>                <br><br>        </div>        `    });    const vm = app.mount('#heheApp');</script>

運行： Vue3父子組件間通信和組件間雙向綁定怎么實現(xiàn)

插槽作用域問題

盡管，父組件中往子組件標簽間插入的組件會替換子組件的插槽位，
但是父組件中往子組件標簽間插入的組件，
其所使用的數(shù)據(jù)字段，依然是父組件的，而非子組件；

父組件的template中調(diào)用的數(shù)據(jù)是父組件中的 data；
子組件的template中調(diào)用的數(shù)據(jù)是子組件中的 data；

<script>    const app = Vue.createApp({        data() {            return {                text: '提交'            }        },        template: `            <myform>                <div>{{text}}</div>            </myform>            <myform>                <button>{{text}}</button>            </myform>`    });    app.component('myform', {        methods: {            handleClick() {                console.log("heheda!!===");            }        },        template:`        <div>            <input />            <span @click="handleClick">                <slot></slot>            </span>                <br><br>        </div>        `    });    const vm = app.mount('#heheApp');</script>

Vue3父子組件間通信和組件間雙向綁定怎么實現(xiàn)

插槽 UI默認值

可以在子組件的插槽<slot>標簽間編寫默認值，
假如父組件沒有使用組件注入插槽，
則對應(yīng)位置會顯示默認值：

<script>    const app = Vue.createApp({        data() {            return {                text: '提交'            }        },        template: `            <myform>                <div>{{text}}</div>            </myform>            <myform>                <button>{{text}}</button>            </myform>            <myform>            </myform>`    });    app.component('myform', {        methods: {            handleClick() {                console.log("heheda!!===");            }        },        template:`        <div>            <input />            <span @click="handleClick">                <slot>default value</slot>            </span>                <br><br>        </div>        `    });    const vm = app.mount('#heheApp');</script>

效果： Vue3父子組件間通信和組件間雙向綁定怎么實現(xiàn)

插槽的靈活拆分與應(yīng)用【具名插槽】

使得插槽的父組件注入部分和子組件占位部分，能夠更加靈活的布局，

可以通過v-slot:[插槽名]來對一組插槽命名，
父組件定義之后 插槽名及其對應(yīng)的組件之后，

子組件只要要在要占位的地方，
配合name屬性使用對應(yīng)命名的<slot>標簽，
就可將對應(yīng)的父組件插槽組件占用過來；
父組件的插槽注入部分的組件，
需要用<template>標簽組包裹起來，
使用v-slot:[插槽名]命名一組插槽；
子組件使用<slot name="[插槽名]"></slot>的形式，進行插槽組件塊的臨時占用；

<script>    const app = Vue.createApp({        template: `            <layout>                <template v-slot:header>                    <div>頭部</div>                </template>                <template v-slot:footer>                    <div>尾部</div>                </template>            </layout>`    });    app.component('layout', {        template:`        <div>            <slot name="header"></slot>            <div>content</div>            <slot name="footer"></slot>        </div>        `    });    const vm = app.mount('#heheApp');</script>

效果： Vue3父子組件間通信和組件間雙向綁定怎么實現(xiàn)

`v-slot`指令的簡寫

v-slot:[插槽名] 可以簡寫成 #[插槽名]

<script>    const app = Vue.createApp({        template: `            <layout>                <template #header>                    <div>頭部</div>                </template>                <template #footer>                    <div>尾部</div>                </template>            </layout>`    });    app.component('layout', {        template:`        <div>            <slot name="header"></slot>            <div>content</div>            <slot name="footer"></slot>        </div>        `    });    const vm = app.mount('#heheApp');</script>

實現(xiàn)的效果同上例；

普通的`v-for`例子進行列表渲染

下面在子組件中，
使用v-for指令循環(huán) 子組件的數(shù)據(jù)，創(chuàng)立DOM組件：

<script>    const app = Vue.createApp({        template: `            <test-list />`    });    app.component('test-list', {        data(){            return {                 list: ["heheda", "xixi" , "lueluelue"]            }        },        template:`        <div>            <div v-for="item in list">{{item}}</div>        </div>        `    });    const vm = app.mount('#heheApp');</script>

運行效果： Vue3父子組件間通信和組件間雙向綁定怎么實現(xiàn)

`v-for`結(jié)合`v-bind`、`v-slot`、`<slot>`做列表渲染

作用：給數(shù)據(jù)由子組件提供，
但列表UI實現(xiàn) 由父組件調(diào)用處提供，
相似于回調(diào)接口的設(shè)計邏輯?。?！

子組件使用v-for循環(huán)獲取數(shù)據(jù)，
每一輪迭代取得的子項數(shù)據(jù)，
通過v-bind設(shè)置到占位的<slot>標簽中，

父組件中，在引用的子組件標簽上，
使用v-slot承接子組件通過v-bind傳來的所有數(shù)據(jù)字段，
同時將這些字段打包成一個相似JSONObject的結(jié)構(gòu) 字段，
并為這個字段 指定一個形參名（如下代碼中的mySlotProps）；

【注意！
前面是，
使用v-slot命名父組件中擬填充插槽的組件，
子組件在<slot>標簽上，通過name=使用父組件的命名，靈活填充插槽；
而這里是，
的slot反而是起到了相似props的作用，而非之前的命名組件作用！】

在 擬填充插槽的DOM組件中，
使用方才 v-slot指定的形參，用于開箱取數(shù)據(jù)：

<script>    const app = Vue.createApp({        template: `            <test-list v-slot="mySlotProps">                 <div>{{mySlotProps.item}}</div>            </test-list>`    });    app.component('test-list', {        data(){            return {                 list: ["heheda", "xixi" , "lueluelue"]            }        },        template:`        <div>            <slot v-for="item in list" :item="item" />        </div>        `    });    const vm = app.mount('#heheApp');</script>

運行效果同上例；

使用`解構(gòu)`概念進行簡寫

使用v-slot="{item}"替代前面的props的結(jié)構(gòu)邏輯形式；
意義是，把mySlotProps這個承接屬性的字段，
里面的item屬性直接解構(gòu) 剝?nèi)?/code>出來，直接拿來用；

<script>    const app = Vue.createApp({        template: `            <test-list v-slot="{item}">                 <div>{{item}}</div>            </test-list>`    });    app.component('test-list', {        data(){            return {                 list: ["heheda", "xixi" , "lueluelue"]            }        },        template:`        <div>            <slot v-for="item in list" :item="item" />        </div>        `    });    const vm = app.mount('#heheApp');</script>

運行效果同上例；

`動態(tài)組件`

常規(guī)的利用雙向綁定特性，通過點擊事件切換UI的寫法：<script>    const app = Vue.createApp({        data() {            return {                currentItem: 'input-item'            }        },        methods: {            handlerClick() {                this.currentItem === 'input-item'?                this.currentItem = 'div-item': this.currentItem = 'input-item'            }        },        template: `            <input-item v-show="currentItem === 'input-item'" />            <div-item v-show="currentItem === 'div-item'" />            <button @click="handlerClick">切換DOM組件</button>`    });    app.component('input-item', {        template:`        <input />`    });    app.component('div-item', {        template:`<div>heheda</div>`    });    const vm = app.mount('#heheApp');</script>
運行效果：
動態(tài)組件寫法語法：
一般在父組件中，
使用占位標簽<component :is="[需顯示的 子組件名]" />，
效果即 占位位置，            

                當前標題：Vue3父子組件間通信和組件間雙向綁定怎么實現(xiàn)
                

                本文地址：http://muchs.cn/article28/gjsicp.html
            

            
                成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、企業(yè)網(wǎng)站制作、微信小程序、企業(yè)建站、App開發(fā)、網(wǎng)頁設(shè)計公司            
            
                廣告
                
            
            
                聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：
                創(chuàng)新互聯(lián)


        
            猜你還喜歡下面的內(nèi)容
            
                
                            如何理解Python程序的校園網(wǎng)的認證方法
                        

                            PerconaServer與MySQL5.5性能的比較
                        

                            程序設(shè)計語言有多少種
                        

                            07-07生成器
                        

                            Python怎么實現(xiàn)DIY一臺會思考的壁障車
                        

                            OracleDatabasePatchsets
                        

                            MySQL和timeout的示例分析

Vue3父子組件間通信和組件間雙向綁定怎么實現(xiàn)

攜帶參數(shù)的事件 發(fā)送和監(jiān)聽回調(diào)

使用 組件的emits板塊 整理組件事件

使用 組件emits板塊的 Object形式 校驗外傳的參數(shù)值

結(jié)合$emit、v-bind與v-model 實現(xiàn) 父子組件通信（數(shù)據(jù)雙向綁定）

結(jié)合$emit、v-bind與v-model 實現(xiàn) 父子組件通信（多個字段的應(yīng)用案例）

自己設(shè)置修飾符

下面在子組件的點擊回調(diào)handleClick()中，通過this.modelModifiers.[自己設(shè)置修飾符名]實現(xiàn)自己設(shè)置修飾符邏輯

插槽【slot】【傳組件示例】

注意，slot標簽上是無法直接增加事件（修飾符）的，如有需要，可以在<slot>外層包裹一層<span>標簽，再加上事件

插槽【傳 字符串示例】

插槽【傳 自己設(shè)置子組件 示例】

插槽作用域問題

插槽 UI默認值

插槽的靈活拆分與應(yīng)用【具名插槽】

v-slot指令的簡寫

普通的v-for例子 進行 列表渲染

v-for結(jié)合v-bind、v-slot、<slot>做列表渲染

使用解構(gòu)概念進行簡寫

動態(tài)組件

攜帶參數(shù)的事件發(fā)送和監(jiān)聽回調(diào)

使用組件的`emits`板塊整理組件事件

使用組件`emits`板塊的 `Object`形式校驗外傳的參數(shù)值

結(jié)合`$emit`、`v-bind`與`v-model` 實現(xiàn) 父子組件通信（數(shù)據(jù)雙向綁定）

結(jié)合`$emit`、`v-bind`與`v-model` 實現(xiàn) 父子組件通信（多個字段的應(yīng)用案例）

下面在子組件的點擊回調(diào)`handleClick()`中，通過`this.modelModifiers.[自己設(shè)置修飾符名]`實現(xiàn)自己設(shè)置修飾符邏輯

注意，slot標簽上是無法直接增加事件（修飾符）的，如有需要，可以在<slot>外層包裹一層<span>標簽，再加上事件

插槽【傳字符串示例】

插槽【傳自己設(shè)置子組件示例】

`v-slot`指令的簡寫

普通的`v-for`例子進行列表渲染

`v-for`結(jié)合`v-bind`、`v-slot`、`<slot>`做列表渲染

使用`解構(gòu)`概念進行簡寫

`動態(tài)組件`