vue-cli 组件之间的通信

1|0通信基本原则

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

2|0组件通信常用方式

 

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

3|0组件通信方式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. 传一个对象
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
  2. 传入方法
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    方法传参
    在这里插入图片描述
    父组件接收参数
    在这里插入图片描述
    其他属性
    在这里插入图片描述
    使用注意:
    1. 此方式用于父组件向子组件传递数据
    2. 所有标签属性都会成为组件对象的属性, 模板页面可以直接引用
    3. 存在缺陷
      1. 如果需要向非子后代传递数据必须多层逐层传递
      2. 兄弟组件间也不能直接 props 通信, 必须借助父组件才可以

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


注意事项:

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

案例:子组件删除父组件的内容
在这里插入图片描述
在这里插入图片描述
传递数据
在这里插入图片描述
父组件接受参数
在这里插入图片描述
在这里插入图片描述

5|0vue-cli实名插槽集成


  1. 在要插入的位置写上< slot >标签
    在这里插入图片描述
  2. 引入组件
    在这里插入图片描述
    slot的值和标签的值对应上
    效果
    在这里插入图片描述

 

__EOF__

posted @ 2021-03-10 13:56  dreamw  阅读(79)  评论(0编辑  收藏  举报