Vue3 组件通信方式

 

目录

Vue3 组件通信方式

1. Props（父组件给子组件传递数据）

2. 自定义事件 （子组件给父组件传递数据）

3. v-model

4. ref和$parent

5. Provide和inject

6. 插槽

---

 

Vue3 组件通信方式

1. Props（父组件给子组件传递数据）

子组件

子组件需要使用到defineProps方法去接受父组件传递过来的数据，defineProps是vue3提供方法,不需要引入直接使用，props为代理对象，在模板中使用可以{{props.属性名}}或者{{直接属性名}}进行使用。当然在

2. 自定义事件 （子组件给父组件传递数据）

在vue框架中事件分为两种:一种是原生的DOM事件，另外一种自定义事件。
原生DOM事件可以让用户与网页进行交互，比如click、dbclick、change.mouseenter自定义事件，可以实现子组件给父组件传递数据。在vue3框架click、dbclick、change(这类原生DOM事件).不管是在标签、自定义标签上(组件标签)都是原生DOM事件。

子组件

父组件

3. v-model

父组件

子组件

4. ref和$parent

父组件控制子组件

父组件

子组件

子组件控制父组件

父组件

子组件

5. Provide和inject

父节点及以上节点和子孙节点的传值，注意传递获得的数据使用的是同一个对象，一个改变其余的都改变。

父组件

子组件

6. 插槽

父组件

子组件