组件间的通信方式及页面传参总结

特性继承

在父组件中使用子组件时，如果给子组件 传入一些非props属性，那么这些属性会作用到子组件的根元素上

• props属性：
  • 在组件使用的过程中经常出现父组件给子组件传参，props就是用来进行父传子的
• 非props属性：
  • 父组件传给子组件中的属性，子组件没有通过props来接收

• inheritAttrs：
  • inheritAttrs：true（默认）启用特性继承
  • inheritAttrs:false:禁用特性继承
  • 注意点:特性继承对class&style不起作用
    
    

$attrs

• 作用：
  • 用来得到当前子组件中的所有非props属性
• 应用：
  • 可以进行隔代传参 （父传参）

$listeners

• 作用：
  • 用来得到父组件中传入到子组件中的所有的事件
• 应用：
  • 可以进行孙传父
    

eventbus

• 作用：进行组件之间的传参（侧重兄弟&隔代组件传参）
• 步骤：

• 1.0 准备 bus
  • export default new Vue()
• 2.0 组件1传入数据
  • bus.$emit(key,value)
• 3.0 组件2接收数据
  • bus.$on(key, value => {})

注意点:

• 是不是说 bus 中的这个事件，在打开 son2 时就已经执行了呢？
• 不是：因为 bus.$on 仅仅只是给 son2 注册了一个事件而已，真正的事件是在 bus.$emit 时才会触发这个 bus.$on

参数验证

• 作用：
  • 用来规范父组件中传给子组件参数的规范

  props: {
    
    
    // 验证类型
    xxx: String,
    age: Number,
    // 必填字段
    myname: {
    
    
      type: String,
      required: true,
      default: 'abc'
    }
  }

组件间的通信方式总结

方式：

• 1.$refs & $parents ：
  • 父传子（在子组件中得到父组件中的数据）：
    • 子组件中： this.$parent.xx
  • 子传父：
    • 父组件中： this.$refs.son.xx
  • 侧重于：父子组件之间的传参
• 2.props & $emit
  • 父传子：
    • 传递：使用自定义属性传递
    • 接收：使用 props 属性接收
  • 子传父：
    • 传递：使用 emit 事件传递
    • 接收：使用事件来接收
  • 侧重于：父子组件之间的传参
• 3.vuex：
  • 可以适用所有的场景
• 4.$attrs & $listeners
  • 侧重于：隔代组件之间的传递
• 5.eventbus:
  • 侧重于：兄弟 & 隔代组件之间的传值

注意点：页面之间传参与组件之间的传参是不一样的

• 页面之间的传参
  • 直接带参数： localhost:3000/#/news?id=111
    • 取： this.$route.query.id
  • 动态路由传参：localhost:3000/#/news/111
    • 取：this.$route.params.id
    • 注意路由后 path: '/home/technicInfo/:id',加了:id就一定要传
    • path: '/home/technicInfo/:id?',加？就可传可不传