Vue 图解组件通讯

1.父组件传递结构给子组件，

如果要从父组件传递结构到子组件中,可以通过slot(插槽)实现

传送门:通过插槽分发内容

作用:

1. 让父组件可以传递结构到子组件中
   1. 文本
   2. 标签

语法:

1. 子组件中希望接收结构的位置写一个<slot></slot>

注意

1. 插槽的作用是什么让父组件传递什么到子组件中
2. 结构组件中的export default默认就导出了,无论外部用不用插槽的默认值``<slot>默认值</slot>不传入结构用默认值传入了结构,用传入的值

2.父组件传递数据给子组件

如果要从父组件传递数据到子组件中,可以通过props实现

传送门:通过prop向子组件传递数据

作用:

1. 父组件可以传递数据到子组件

语法:

1. 子组件(my-link)
   1. 和data平级写props:['属性1','属性2']
2. 父组件
   1. <my-link 属性1="xxx" 属性2="xxxxxx"></my-link>
3. 子组件中
   1. this.属性1
   2. 行内使用和data没有任何区别
4. 父组件修改了数据，子组件设置的数据就无效了

3.子组件传递消息或数据给父组件

如果要在子组件中和父组件沟通,可以通过emit来实现,还可以传递数据哦

传送门:监听子组件事件

传送门:$emit

传送门:使用事件抛出一个值

作用:

1. 子组件向父组件发消息,甚至可以传递数据

语法:

1. 子组件中this.$emit('事件名',参数
2. 父组件中@事件名=方法、逻辑
   1. 和子组件中$emit跟的名字对应
3. 注册方法,即可执行逻辑

4.父子组件的交互

使用刚刚学习的$emit来调优计数器组件

需求:

1. 修改父组件的数据
2. 让他重新流向子组件

步骤:

1. 子组件this.$emit('numChange',最新的结果)
2. 父组件
   1. @numChange="方法"
   2. methods实现方法
      1. 接收参数,并修改父组件中的数据
3. 通过单向数据流重新流向子组件

4.据传递贯穿了整个Vue的开发阶段

5.符合代码规范props版本

根据官方的代码规范

可以定义props的数据类型，必填项，默认值，自检函数

props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }

1. 类型不匹配:

   1. 

2. 没有传入必须传入的属性

   1. 

3.需求:

1. 调优计数器组件
2. 必填num参数,类型为数值,
3. 可选min和max参数
   1. min:Number类型,默认值是0
   2. max:Number类型,默认值是10
4. 父组件更新数据的逻辑写行内（因为逻辑太简单）
   1. 行内获取传递过来的参数
   2. $event
      1. dom元素,获取的是事件对象
      2. 组件,获取的是,子组件传递出来的参数