vue-cli 组件之间的通信

通信基本原则

1. 不要在子组件中直接修改父组件的状态数据
2. 数据和处理数据的函数应该在同一模块内

组件通信常用方式

1. props
2. 自定义事件
3. slot插槽
4. 消息订阅与发布
5. vuex

组件通信方式1-props

1. 在组件内声明所有的 props 只指定名称 props: [‘name’, ‘age’, ‘logDog’]
2. 指定名称和类型 props: { name: String, age: Number, logDog: Function }
3. 指定名称/类型/必要性/默认值 props: { name: {type: String, required: true, default:xxx}, }

示例： 在组件中

在这里插入图片描述

app.vue中传参

在这里插入图片描述

4. 定义传值的数据类型

在这里插入图片描述

在这里插入图片描述

数值类型需要加上 ‘ : ’ 比如 :age :price

1. 传一个对象

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

1. 传入方法

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

方法传参

在这里插入图片描述

父组件接收参数

在这里插入图片描述

其他属性

在这里插入图片描述

使用注意：

1. 此方式用于父组件向子组件传递数据
2. 所有标签属性都会成为组件对象的属性, 模板页面可以直接引用
3. 存在缺陷
   1. 如果需要向非子后代传递数据必须多层逐层传递
   2. 兄弟组件间也不能直接 props 通信, 必须借助父组件才可以

组件通信方式2-自定义事件

注意事项：

1. 此方式只用于子组件向父组件发送消息(数据)
2. 隔代组件或兄弟组件间通信此种方式不合适

案例：子组件删除父组件的内容

在这里插入图片描述

在这里插入图片描述

传递数据

在这里插入图片描述

父组件接受参数

在这里插入图片描述

在这里插入图片描述

vue-cli实名插槽集成

1. 在要插入的位置写上< slot >标签

在这里插入图片描述

1. 引入组件

在这里插入图片描述

slot的值和标签的值对应上 效果

在这里插入图片描述