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

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

本文內容提要

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

攜帶參數的事件發送和監聽回調

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

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

結合$emit、v-bind與v-model 實現父子組件通信（數據雙向綁定）

結合$emit、v-bind與v-model 實現父子組件通信（多個字段的應用案例）

自定義修飾符

實驗this.modelModifiers的作用

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

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

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

插槽【傳字符串示例】

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

插槽作用域問題

插槽 UI默認值

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

v-slot指令的簡寫

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

v-for結合v-bind、v-slot、<slot>做列表渲染

使用解構概念進行簡寫

動態組件

常規的利用雙向綁定特性，通過點擊事件切換UI的寫法

動態組件寫法

異步組件

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

前面的筆記 —— 《Vue3 | 組件的定義及復用性、局部組件、全局組件、組件間傳值及其校驗、單項數據流、Non-props屬性》，單向數據流的概念，
即子組件無法修改來自父組件的數據字段，

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

接著各級父組件會收到這個事件，
則在父組件中調用子組件標簽處，
以 @【事件名】= "回調方法名"的形式，監聽該事件以及配置回調方法；
回調方法中即可對子組件意圖修改的父組件數據字段進行修改；

注意，
觸發事件的命名，用駝峰命名法（如下heHeDa）；
監聽事件的命名，用橫桿間隔法（如下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>

運行，點擊組件：

攜帶參數的事件發送和監聽回調

this.$emit()可以添加參數位，
父組件的監聽回調中，
則可加形參位用于接收參數（如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>

運行，點擊效果：

子組件需發送多個參數亦可，只要在this.$emit()按需添加參數位，
父組件的監聽回調中，添加對應的形參去接收即可：

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

效果：

當然父組件接收子組件參數后的計算邏輯，
可以在子組件傳參的時候計算完成再傳給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`板塊整理組件事件

實際開發場景中，我們一個組件自定義的觸發事件可能會很多，
我們不可能一個一個去梳理核實，
這個時候就可以使用組件的emits板塊來整理組件的事件；

可以把組件中 自定義到的事件都寫在這里，方便梳理，提高可讀性，
或者把 想要定義的事件 寫在這里，
如此一來，如果忘記編寫對應的自定義事件，
Vue系統會在運行時給予警告：

<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系統會在運行時給予警告：

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

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

返回true表示同意數值外傳，
返回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>

運行，點擊效果：

結合`$emit`、`v-bind`與`v-model` 實現父子組件通信（數據雙向綁定）

v-model可以實現數據字段與DOM節點內容的雙向綁定，
也可以實現數據字段與數據字段之間的雙向綁定；
而v-bind只能是實現單向數據流；

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

如下代碼，
子組件的承接變量modelValue 同父組件的count字段雙向綁定，
（實際上就是v-model的特性 —— 將子組件的內容即modelValue 同父組件的數據字段雙向綁定）
然后顯示在子組件的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>

實現效果與上例相同；

結合`$emit`、`v-bind`與`v-model` 實現父子組件通信（多個字段的應用案例）

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

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

效果：

自定義修飾符

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

實驗`this.modelModifiers`的作用

首先下面是一個空的處理，'modelModifiers'板塊中指定默認值（下代碼指定為一個空對象{}），
mounted函數中打印子組件modelModifiers屬性的內容，

代碼如下，
運行后，可以見打印了一個對象{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>

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

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

<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>標簽對臨時占位；

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

【slot】的出現，
方便父子組件之間數據的傳遞，
方便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>

運行：

插槽作用域問題

雖然，父組件中往子組件標簽間插入的組件會替換子組件的插槽位，
但是父組件中往子組件標簽間插入的組件，
其所使用的數據字段，仍然是父組件的，而非子組件；

父組件的template中調用的數據是父組件中的 data；
子組件的template中調用的數據是子組件中的 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>

實現的效果同上例；

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

下面在子組件中，
使用v-for指令循環子組件的數據，創建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`結合`v-bind`、`v-slot`、`<slot>`做列表渲染

作用：給數據由子組件提供，
但列表UI實現 由父組件調用處提供，
類似于回調接口的設計邏輯！！！

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

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

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

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

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

運行效果同上例；

使用`解構`概念進行簡寫

使用v-slot="{item}"替代前面的props的結構邏輯形式；
意義是，把mySlotProps這個承接屬性的字段，
里面的item屬性直接解構剝取出來，直接拿來用；

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

運行效果同上例；

動態組件

常規的利用`雙向綁定特性`，通過點擊事件切換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>

運行效果：

動態組件寫法

語法：
一般在父組件中，
使用占位標簽<component :is="[需顯示的子組件名]" />，
效果即占位位置，會顯示 is屬性指定組件名的子組件；
另外，
使用<keep-alive>標簽，包裹<component :is="[需顯示的子組件名]" />，
可以是切換組件的時候，能夠緩存組件的數據，
如一個有輸入數據的<input> 切換成一個其他組件再切換回來的時候，
可以保留一開始的輸入數據：

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

運行效果：
初始為有輸入數據的輸入框：

點擊切換為文本組件：

再次點擊，切換為有輸入數據的輸入框，
由于<keep-alive>的作用，數據緩存下來，沒有丟失，
如果沒加<keep-alive>，這里會是空的輸入框：

異步組件

首先，
本文在此案例之前的所有案例，都是同步組件，
即隨即渲染，一個線程運行；

下面是異步（自定義子）組件，
可以設定在某個時刻開始，延遲一個時延后，再執行渲染：

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

運行效果：

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

Vue3 | 父子組件間通信、組件間雙向綁定的高級內容、插槽詳解、動態組件、異步組件

Vue3 | 父子組件間通信、組件間雙向綁定的高級內容、插槽詳解、動態組件、異步組件

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

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

本文內容提要

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

攜帶參數的事件發送和監聽回調

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

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

結合`$emit`、`v-bind`與`v-model` 實現父子組件通信（數據雙向綁定）

結合`$emit`、`v-bind`與`v-model` 實現父子組件通信（多個字段的應用案例）

自定義修飾符

實驗`this.modelModifiers`的作用

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

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

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

插槽【傳字符串示例】

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

插槽作用域問題

插槽 UI默認值

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

`v-slot`指令的簡寫

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

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

使用`解構`概念進行簡寫

動態組件

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

動態組件寫法

異步組件

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

Vue3 | 父子組件間通信、組件間雙向綁定的高級內容、插槽詳解、動態組件、異步組件

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

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

本文內容提要

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

攜帶參數的事件 發送和監聽回調

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

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

結合$emit、v-bind與v-model 實現 父子組件通信（數據雙向綁定）

結合$emit、v-bind與v-model 實現 父子組件通信（多個字段的應用案例）

自定義修飾符

實驗this.modelModifiers的作用

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

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

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

插槽【傳 字符串示例】

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

插槽作用域問題

插槽 UI默認值

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

v-slot指令的簡寫

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

v-for結合v-bind、v-slot、<slot>做列表渲染

使用解構概念進行簡寫

動態組件

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

動態組件寫法

異步組件

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

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

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

攜帶參數的事件發送和監聽回調

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

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

結合`$emit`、`v-bind`與`v-model` 實現父子組件通信（數據雙向綁定）

結合`$emit`、`v-bind`與`v-model` 實現父子組件通信（多個字段的應用案例）

實驗`this.modelModifiers`的作用

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

插槽【傳字符串示例】

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

`v-slot`指令的簡寫

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

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

使用`解構`概念進行簡寫

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