Vue3 组件之间父子通信

Vue3 组件之间父子通信

概述

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

选项式API

父传子

父组件：Father.vue

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

子组件：Child.vue

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

方式一：只接收

方式二：限制类型

支持类型：

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

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

• type
• required
• default

子传父

子组件：Child.vue

父组件：Father.vue

组合式API

父传子

• 在父组件中给子组件绑定属性。
• 在子组件中通过props接收数据。

父组件：Father2.vue

子组件：Child2.vue

子传父

• 在父组件中给子组件通过@绑定事件。
• 在子组件中通过emit方法触发事件。

子组件：Child2.vue

父组件：Father2.vue