Vue3 | 父子組件間通信课锌、組件間雙向綁定的高級內(nèi)容、插槽詳解祈秕、動態(tài)組件渺贤、異步組件

完整原文地址見簡書http://www.reibang.com/p/c8891bd3fe36

更多完整Vue筆記目錄敬請見《前端 Web 筆記匯總目錄（Updating）》

本文內(nè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) 父子組件通信（多個字段的應用案例）

自定義修飾符

實驗this.modelModifiers的作用

下面在子組件的點擊回調(diào)handleClick()中志鞍，通過this.modelModifiers.[自定義修飾符名]實現(xiàn)自定義修飾符邏輯

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

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

插槽【傳字符串示例】

插槽【傳自定義子組件示例】

插槽作用域問題

插槽 UI默認值

插槽的靈活拆分與應用【具名插槽】

v-slot指令的簡寫

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

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

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

動態(tài)組件

常規(guī)的利用雙向綁定特性厂汗，通過點擊事件切換UI的寫法

動態(tài)組件寫法

異步組件

父子組件可通過事件進行通信

前面的筆記 —— 《Vue3 | 組件的定義及復用性、局部組件呜师、全局組件娶桦、組件間傳值及其校驗、單項數(shù)據(jù)流汁汗、Non-props屬性》衷畦，單向數(shù)據(jù)流的概念，
即子組件無法修改來自父組件的數(shù)據(jù)字段知牌，

如果確要修改祈争，可以使用下面說的方式進行通信：
首先，在子組件的UI點擊回調(diào)方法中角寸，調(diào)用this.$emit('【自定義事件名】')铛嘱，
向外發(fā)送一個事件；

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

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

代碼：

<!DOCTYPE html>
<html lang="en">
<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>

運行，點擊組件：

攜帶參數(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>

運行瞬痘，點擊效果：

子組件需發(fā)送多個參數(shù) 亦可故慈，只要在this.$emit()按需添加參數(shù)位，
父組件的監(jiān)聽回調(diào)中框全，添加對應的形參去接收即可：

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

效果：

當然父組件接收子組件參數(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ā)場景中，我們一個組件自定義的觸發(fā)事件可能會很多闸度，
我們不可能一個一個去梳理核實竭贩，
這個時候就可以使用組件的emits板塊來整理組件的事件；

可以把組件中 自定義到的事件都寫在這里筋岛，方便梳理娶视，提高可讀性，
或者把 想要定義的事件 寫在這里睁宰，
如此一來肪获，如果忘記編寫對應的自定義事件，
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>

如果忘記編寫對應的自定義事件柒傻，Vue系統(tǒng)會在運行時給予警告：

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

可以根據(jù)需要孝赫，使用組件emits板塊的 Object形式校驗外傳的參數(shù)值，
如下红符，子組件的emits板塊青柄，
‘key’值定義對應的事件名，‘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>

運行双戳，點擊效果：

結(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ù)流；

若不自定義承接的字段名峭竣，則需要用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>

效果：

當然也可以自定義字段名沮榜，
這種方式需要給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) 父子組件通信（多個字段的應用案例）

如下代碼，
父組件的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>

效果：

自定義修飾符

機制：在父組件調(diào)用處山憨，在v-model后使用自定義修飾符，
在實現(xiàn)修飾符邏輯的地方弥喉，如點擊事件中郁竟，
通過this.modelModifiers.[自定義修飾符名]返回的布爾值，
判斷用戶是否使用了修飾符由境，
進而分別對使用與否做相應的處理棚亩；
另外'modelModifiers'板塊中可以指定默認值（下代碼指定為一個空對象{}）；

實驗`this.modelModifiers`的作用

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

代碼如下纺阔，
運行后瘸彤，可以見打印了一個對象{captalize: true}，
正是我們傳入的自定義修飾符.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>

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

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

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

效果：

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

使用關鍵主要分兩個部分：
自定義子組件：
在需要被父組件插入組件的位置玻靡，
使用<slot></slot>標簽對臨時占位结榄；

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

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

<!DOCTYPE html>
<html lang="en">
<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>

運行效果：

注意最蕾，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>

運行，點擊提交文本或按鈕：

插槽【傳字符串示例】

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

插槽【傳自定義子組件示例】

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

運行：

插槽作用域問題

雖然枝秤，父組件中往子組件標簽間插入的組件會替換子組件的插槽位醋拧，
但是父組件中往子組件標簽間插入的組件，
其所使用的數(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>

插槽 UI默認值

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

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

效果：

插槽的靈活拆分與應用【具名插槽】

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

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

子組件只需要在要占位的地方奴紧，
配合name屬性使用對應命名的<slot>標簽，
即可將對應的父組件插槽組件占用過來晶丘；
父組件的插槽注入部分的組件黍氮，
需要用<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>

效果：

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

運行效果：

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

作用：給數(shù)據(jù)由子組件提供，
但列表UI實現(xiàn) 由父組件調(diào)用處提供已艰，
類似于回調(diào)接口的設計邏輯Ｈ！哩掺！

子組件使用v-for循環(huán)獲取數(shù)據(jù)凿叠，
每一輪迭代獲得的子項數(shù)據(jù)，
通過v-bind設置到占位的<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="[需顯示的 子組件名]" />未巫，

效果即 占位位置窿撬，會顯示 is屬性 指定組件名的子組件；

另外叙凡，

使用<keep-alive>標簽劈伴，包裹<component :is="[需顯示的 子組件名]" />，

可以是切換組件的時候握爷，能夠緩存組件的數(shù)據(jù)跛璧，

如一個有輸入數(shù)據(jù)的<input> 切換成一個其他組件 再切換 回來的時候，

可以保留一開始的輸入數(shù)據(jù)：

<script>
    const app = Vue.createApp({
        data() {
            return {
                currentItem: 'input-item'
            }
        },
        methods: {
            handlerClick() {
                console.log("handlerClick ----- ");
                this.currentItem === 'input-item'?
                this.currentItem = 'div-item': this.currentItem = 'input-item'
            }
        },
        template: `
            <keep-alive>
                <component :is="currentItem" />
            </keep-alive>
            <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>

運行效果：

初始為有輸入數(shù)據(jù)的輸入框：






點擊切換為文本組件：





再次點擊新啼，切換為有輸入數(shù)據(jù)的輸入框追城，

由于<keep-alive>的作用，數(shù)據(jù)緩存下來燥撞，沒有丟失座柱，

如果沒加<keep-alive>，這里會是空的輸入框：








異步組件
首先物舒，

本文在此案例之前的所有案例色洞，都是同步組件，

即隨即渲染冠胯，一個線程運行锋玲；


下面是異步（自定義子）組件，

可以設定在某個時刻開始涵叮，延遲一個時延后，再執(zhí)行渲染：
<script>
    const app = Vue.createApp({
        template: `
            <div>
                <div-item />
                <my-async-item />
            </div>`        
    });

    app.component('div-item', {
        template:`<div>heheda heheda</div>`
    });

    app.component('my-async-item', Vue.defineAsyncComponent(() => {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve({
                    template: `<div>this is my async component</div>`
                })
            }, 4000)
        })
    }))

    const vm = app.mount('#heheApp');
</script>

關鍵代碼【異步（自定義子）組件】：
    app.component('my-async-item', Vue.defineAsyncComponent(() => {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve({
                    template: `<div>this is my async component</div>`
                })
            }, 4000)
        })
    }))



運行效果：

最后編輯于：2021.04.08 15:02:34

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末伞插，一起剝皮案震驚了整個濱河市割粮，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌媚污，老刑警劉巖舀瓢，帶你破解...
沈念sama閱讀 206,311評論 6贊 481
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異耗美，居然都是意外死亡京髓，警方通過查閱死者的電腦和手機航缀，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 88,339評論 2贊 382
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來堰怨，“玉大人芥玉，你說我怎么就攤上這事”竿迹” “怎么了灿巧？”我有些...
開封第一講書人閱讀 152,671評論 0贊 342
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長揽涮。經(jīng)常有香客問我抠藕，道長，這世上最難降的妖魔是什么蒋困？我笑而不...
開封第一講書人閱讀 55,252評論 1贊 279
?港島之戀（遺憾婚禮）
正文為了忘掉前任盾似，我火速辦了婚禮，結(jié)果婚禮上雪标，老公的妹妹穿的比我還像新娘零院。我一直安慰自己，他們只是感情好汰聋，可當我...
茶點故事閱讀 64,253評論 5贊 371
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布门粪。她就那樣靜靜地躺著，像睡著了一般烹困。火紅的嫁衣襯著肌膚如雪玄妈。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 49,031評論 1贊 285
城市分裂傳說
那天髓梅，我揣著相機與錄音拟蜻，去河邊找鬼。笑死枯饿，一個胖子當著我的面吹牛酝锅，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播奢方，決...
沈念sama閱讀 38,340評論 3贊 399
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼搔扁，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了蟋字？” 一聲冷哼從身側(cè)響起稿蹲，我...
開封第一講書人閱讀 36,973評論 0贊 259
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎鹊奖，沒想到半個月后苛聘，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 43,466評論 1贊 300
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 35,937評論 2贊 323
?白月光啟示錄
正文我和宋清朗相戀三年设哗，在試婚紗的時候發(fā)現(xiàn)自己被綠了唱捣。大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 38,039評論 1贊 333
活死人
序言：一個原本活蹦亂跳的男人離奇死亡网梢，死狀恐怖震缭，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情澎粟，我是刑警寧澤蛀序，帶...
沈念sama閱讀 33,701評論 4贊 323
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站活烙，受9級特大地震影響徐裸，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜啸盏，卻給世界環(huán)境...
茶點故事閱讀 39,254評論 3贊 307
男人毒藥：我在死后第九天來索命
文/蒙蒙一重贺、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧回懦，春花似錦气笙、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 30,259評論 0贊 19
一樁弒父案潜圃，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至舟茶，卻和暖如春谭期，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背吧凉。一陣腳步聲響...
開封第一講書人閱讀 31,485評論 1贊 262
情欲美人皮
我被黑心中介騙來泰國打工隧出，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人阀捅。一個月前我還...
沈念sama閱讀 45,497評論 2贊 354
代替公主和親
正文我出身青樓胀瞪，卻偏偏與公主長得像，于是被迫代替她去往敵國和親饲鄙。傳聞我的和親對象是個殘疾皇子凄诞，可洞房花燭夜當晚...
茶點故事閱讀 42,786評論 2贊 345

Vue3 | 父子組件間通信百揭、組件間雙向綁定的高級內(nèi)容爽哎、插槽詳解、動態(tài)組件器一、異步組件

Vue3 | 父子組件間通信课锌、組件間雙向綁定的高級內(nèi)容、插槽詳解祈秕、動態(tài)組件渺贤、異步組件

完整原文地址見簡書http://www.reibang.com/p/c8891bd3fe36

更多完整Vue筆記目錄敬請見《前端 Web 筆記匯總目錄（Updating）》

本文內(nè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) 父子組件通信（多個字段的應用案例）

自定義修飾符

實驗`this.modelModifiers`的作用

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

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

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

插槽【傳字符串示例】

插槽【傳自定義子組件示例】

插槽作用域問題

插槽 UI默認值

插槽的靈活拆分與應用【具名插槽】

`v-slot`指令的簡寫

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

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

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

動態(tài)組件

常規(guī)的利用`雙向綁定特性`削饵，通過點擊事件切換UI的寫法：

動態(tài)組件寫法

異步組件

Vue3 | 父子組件間通信课锌、組件間雙向綁定的高級內(nèi)容、插槽詳解祈秕、動態(tài)組件渺贤、異步組件

完整原文地址見簡書http://www.reibang.com/p/c8891bd3fe36

更多完整Vue筆記目錄敬請見《前端 Web 筆記 匯總目錄（Updating）》

本文內(nè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) 父子組件通信（多個字段的應用案例）

自定義修飾符

實驗this.modelModifiers的作用

下面在子組件的點擊回調(diào)handleClick()中质况，通過this.modelModifiers.[自定義修飾符名]實現(xiàn)自定義修飾符邏輯

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

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

插槽【傳 字符串示例】

插槽【傳 自定義子組件 示例】

插槽作用域問題

插槽 UI默認值

插槽的靈活拆分與應用【具名插槽】

v-slot指令的簡寫

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

v-for結(jié)合v-bind叔遂、v-slot他炊、<slot>做列表渲染

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

動態(tài)組件

常規(guī)的利用雙向綁定特性削饵，通過點擊事件切換UI的寫法：

動態(tài)組件寫法

異步組件

更多完整Vue筆記目錄敬請見《前端 Web 筆記匯總目錄（Updating）》

父子組件可通過事件進行通信

攜帶參數(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) 父子組件通信（多個字段的應用案例）

實驗`this.modelModifiers`的作用

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

插槽【傳字符串示例】

插槽【傳自定義子組件示例】

`v-slot`指令的簡寫

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

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

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

常規(guī)的利用`雙向綁定特性`削饵，通過點擊事件切換UI的寫法：