vue组件化

事件的派发和更新通常是同一个组件。注意点

误区：子组件$emit，父组件监听子组件的@EventName ，认为是父组件监听，子组件派发。

$attrs/$listeners编码效率组件封装常用点

爷孙组件传参常用点⭐

  1. //index.vue
  2. <Parent msg="msg from grandpa" @foo="onFoo"></Parent>
  4. //Parent.vue
  5. //属性展开 
  6. <Child2 v-bind="$attrs" v-on="$listeners"></Child2>
  8. //child2.vue
  10. //template
  11. <p>{{$attrs.msg}}</p>
  13. //methods
  14. sendToChild1() {
  15.   this.$emit('foo')
  16. }

这样可以在父辈组件中将属性传递下去，不用额外设置props，🌰:props-name="someData"这样形式传递。

$listeners的作用可以少些很多代码，比如在父辈组件中绑定@event-name="someEventName",子辈组件$emit的时候可以隔级传递自定义事件。不需要一层一层传递自定义事件。

provide/inject编码效率组件封装常用点

跨多级组件传参常用

  1. //index.vue
  2. provide() {
  3.   return {
  4.     bar: 'bar'
  5.   }
  6. },
  7. //child.vue
  8. inject:['bar'] //用法1
  9. inject: {
  10.   bar1: {
  11.     from: 'bar',
  12.     default: 'barrrrrrrr' //默认值
  13.   }
  14. }, //用法2
  15. inject: {
  16.   bar1: 'bar'
  17. }, //用法3

inheritAttrs: false

取消根元素继承attrs

Vue.extend

  1. const Constructor = Vue.extend(component) // 生成构造器
  2. const instance = new Constructor() // 创建实例
  3. instance.$mount('body') //挂载body

笔记01_vue组件化实践【瑞客 论坛 www.ruike1.com】.pdf