Vue3 组件之通信(选项式API)

Vue3 组件之通信(选项式API)

父子通信

概述

所有的 props 都遵循着单向绑定原则，props 因父组件的更新而变化，自然地将新的状态向下流往子组件，而不会逆向传递。

父向子通信

父组件：Father.vue

• 静态prop：在定义组件时确定值，如abc="ABC"。
• 动态prop：在组件被渲染时确定值，需要使用 v-bind 或缩写 : 来进行动态绑定的 props，如:message="msg"和:list="list"。
• 每次父组件更新后，所有的子组件中的 props 都会被更新到最新值。

<script>
import Child from "./Child.vue"

export default {
    data() {
        return {
            message: "hello",
            list: ["北京", "上海", "广州"]
        }
    },
    methods: {
        changeMessage() {
            this.message = "你好"
        }
    },
    components: {
        Child
    }
}
</script>

<template>
    <h2>父组件</h2>
	<button @click="changeMessage">修改message</button>
    <Child abc="ABC" :message="message" :list="list"></Child>
</template>

子组件：Child.vue

需要通过props属性接收来自父组件的数据，子组件不能直接修改接收到值——单项数据流。

方式一：只接收

<script>
export default {
    props: ["abc", "message", "list"]
}
</script>

<template>
    <h2>子组件</h2>
    <p>abc: {{ abc }}</p>
    <p>message: {{ message }}</p>
    <p>list: {{ list }}</p>
</template>

方式二：限制类型

支持类型：

• String
• Number
• Boolean
• Array
• Object
• Date
• Function
• Symbol

<script>
export default {
    props: {
        abc: String,
        message: String,
        list: Array
    }
}
</script>

<template>
    <h2>子组件</h2>
    <p>abc: {{ abc }}</p>
    <p>message: {{ message }}</p>
    <p>list: {{ list }}</p>
</template>

方式三：限制类型、限制必填、指定默认值

• type
• required
• default

<script>
export default {
    props: {
        abc: {
            type: String,
            default: "66666"
        },
        message: {
            type: String, //数据类型
            default: "你好", //默认值
            required: true //是否必填
        },
        list: {
            type: Array,
            default() { //默认值，对象或数组需要调用default()方法
                return []
            }
        }
    }
}
</script>

<template>
    <h2>子组件</h2>
    <p>abc: {{ abc }}</p>
    <p>message: {{ message }}</p>
    <p>list: {{ list }}</p>
</template>

子向父通信

子组件：Child.vue

<script>
export default {
    data() {
        return {
            childMsg: "哈喽 来自子组件的消息"
        }
    },
    methods: {
        // 第二步：定义事件，传递数据
        sendFatherData() {
            this.$emit("onReceive", this.childMsg)
        }
    }
}
</script>

<template>
    <div>
        <!-- 第一步：发送消息 -->
        <button @click="sendFatherData">向父组件发送数据</button>
    </div>
</template>

<style scoped>
div {
    border: 1px dashed silver;
}
</style>

父组件：Father.vue

<script>
import Child from "./Child.vue"

export default {
    data() {
        return {
            childMsg: ""
        }
    },
    methods: {
        // 第四步：接收数据
        receiveChildMsg(value) {
            this.childMsg = value
        }
    },
    components: {
        Child
    }
}
</script>

<template>
    <h2>父组件</h2>
    <!-- 第三步：监听事件，回调receiveChildMsg方法 -->
    <Child abc="ABC" :message="message" :list="list" @onReceive="receiveChildMsg"></Child>
    <p>接收子组件数据：{{ childMsg }}</p>
</template>

跨级通信

概述

通常情况下，当我们需要从父组件向子组件传递数据时，会使用props。

但是一些多层级嵌套的组件，形成了一颗巨大的组件树，仅使用 props 则必须将其沿着组件链逐级传递下去，这会非常麻烦。

可以使用provide 和 inject 解决这一问题。一个父组件相对于其所有的后代组件，会作为依赖提供者。任何后代的组件树，无论层级有多深，都可以注入由父组件提供给整条链路的依赖。

简单使用

• 顶层组件通过provide提供数据。
• 底层组件通过inject接收数据。

定义父组件：Father.vue

<script>
import Child from "./Child.vue"
export default {
    // 方式一：
    provide: {
        message: "hello world"
    }
    components: {
        Child,
    }
}
</script>

定义孙子组件：GrandChild.vue

<script>
export default {
    inject: ["message"]
}
</script>

<template>
    <h2>孙子组件</h2>
    <p>message:{{ MessageChannel }}</p>
</template>

支持响应式

provide函数：可以访问当前组件实例的数据，同时可以支持响应式数据。

父组件：Father.vue

<script>
import { computed } from "vue"
import Child from "./Child.vue"
export default {
    data() {
        return {
            name: "小白",
            age: 18,
            address: "北京市",
            userInfo: {
                name: "小红",
                age: 1
            },
            message: "hello",
        }
    },
    methods: {
        changeData: function () {
            this.name = "小黑"
            this.age = 28
            this.address = "上海市"
            this.userInfo.name = "小红2222"
            this.userInfo.age = "2"
            this.message = "哈喽！"
        }
    },
    provide() {
        return {
            name: this.name, //不支持响应式
            age: this.age, //不支持响应式
            address: this.address,//不支持响应式
            userInfo: this.userInfo, //支持响应式，浅拷贝
            message: computed(() => this.message), //支持响应式，使用计算属性
        }
    },
    components: {
        Child,
    }
}
</script>

<template>
    <h2>父组件</h2>
    <p>{{ name }}-{{ age }}-{{ address }}</p>
    <p>{{ userInfo }}</p>
    <p>{{ message }}</p>
    <button @click="changeData">修改数据</button>
    <Child></Child>
</template>

孙子组件：GrandChild.vue

<script>
export default {
    inject: ["name", "age", "address", "userInfo", "message"]
}
</script>

<template>
    <h2>孙子组件</h2>
    <p>{{ name }}-{{ age }}-{{ address }}</p>
    <p>{{ userInfo }}</p>
    <p>{{ message }}</p>
</template>

调用顶层方法

父组件：Father.vue

<script>
import { computed } from "vue"
import Child from "./Child.vue"
export default {
    data() {
        return {
            name: "小白",
        }
    },
    methods: {
        changeFatherMethod: function () {
            this.name = "小绿"
        }
    },
    provide() {
        return {
            changeFatherMethod: this.changeFatherMethod
        }
    },
    components: {
        Child,
    }
}
</script>

<template>
    <h2>父组件</h2>
    <Child></Child>
</template>

孙子组件：GrandChild.vue

<script>
export default {
    inject: ["changeFatherMethod"]
}
</script>

<template>
    <h2>孙子组件</h2>
    <button @click="changeFatherMethod">调用顶层方法</button>
</template>