22-组件通信

一. 什么是组件通信

组件通信,就是指 组件与组件 之间的数据传递

        1. 组件的数据是独立的,无法直接访问其他组件的数据。

        2. 想用其他组件的数据 -> 组件通信

二. 不同的组件关系 和 组件通信方案分类

组件关系分类:

        1. 父子关系

        2. 非父子关系

22-组件通信_第1张图片

 组件通信解决方案:

22-组件通信_第2张图片

 

 三. 父子通信流程图

        1. 父组件通过 props 将数据传递给子组件

        2. 子组件利用$emit 通知父组件修改更新

22-组件通信_第3张图片

 父传子代码演示:

        1. 父中给子添加属性传值   2. 子props 接收  3. 使用

22-组件通信_第4张图片

 

子传父代码演示:

        1. 子$emit 发送消息  2. 父中给子添加消息监听  3.父中实现处理函数

22-组件通信_第5张图片

 

你可能感兴趣的:(Vue3学习笔记,vue.js)