(三) vue组件化-组件通信

父子组件之间的通信

• 父组件传递给子组件：通过props属性；
• 子组件传递给父组件：通过$emit触发事件

父组件传递给子组件

• 在开发中很常见的就是父子组件之间的通信，比如父组件有一些数据，需要子组件来进行展示：
  • 这个时候可以通过props来完成组件之间的通信；
• 什么是props
  • props是可以在注册组件上注册一些自定义的attribute;
  • 父组件给这些attribute赋值，子组件通过attribute的名称获取到对应的值；
• props的两种常见的用法：
  • 方式一：字符串数组，数组中的字符串就是attribute的名称；
    • 弊端：不能指定类型进行验证；
    • 没有默认值
  • 方式二：对象类型，对象类型我们可以在指定的attribute名称的同时，指定它需要传值的类型、是否是必须的、默认值等等；
  • 

     

  • 默认都是字符串类型，但是加上v-bind之后属性的值就是js类型；
  • 类型：对象（数组），需要默认值时，需要编写dafault函数,函数返回默认值

非props的attribute

• 什么是prop的attribute
  • 当我们传递一个组件某个属性，但是该属性并没有定义对应的props或者emits时，就称之为非prop的attribute;
  • 常见的包括class、style、id属性等；
• attribute继承
  • 当组件有单个根节点时，非prop的attribute将自动添加到根节点的attribute中；
• 禁用attribute继承和多根节点
  • 如果我们不希望组件的根元素继承attribute，可以在组件中设置inheritAttrs:false;
  • 禁用attribute继承的常见情况是需要将attribute应用于根元素之外的其他元素；
  • 我们可以通过$attrs来访问所有的 非props的attribute；
• 多个根节点的attribute
  • 多个根节点的attribute如果没有显示绑定，那么会报警告；我们必须手动的指定要绑定到哪一个属性上；

子组件传递给父组件

• 当子组件有一些事情发生的时候，比如在组件中发生了点击，父组件需要切换内容；
• 子组件有一些内容想要传递给父组件的时候；
• 实现子组件传递给父组件
  • 首先，需要在子组件中定义好在某些情况下接触触发的事件名称；
  • 其次，在父组件中以v-on的方式传入要监听的事件名称，并且绑定到对应的方法中；
  • 最后，在子组件中发生某个事件的时候，根据事件名称触发对应的事件；
• 子组件触发事件后：通过this.$emit的方式发送出去。
• this.$emit(),第一个参数是名称，给父组件监听的名称，第二个是值（实参，参数）
• 子组件发送合集是一个数组在根对象中：emits:[].里面是事件名字；

非父子之间的通信

• provide和inject
  • provide/inject非父子组件之间共享数据：
  • 无论层级有多深，父组件都可以作为其所有子组件的依赖提供者；
  • 父组件有一个provide选项来提供数据；
  • 子组件有一个inject选项来开始使用这些数据

11