vue造轮子，封装组件库-主要前置知识与总结

• 组件通讯
• 组件插槽
• 具名插槽与v-slot指令
• props校验
• vue过渡与动画
  结构

<transition 
name="dialog-fade" 
@after-enter="afterEnter"
 @after-leave="afterLeave">
 <xxx></xxx>
</transition>

样式

.dialog-fade-enter-active {
  animation: dialog-fade-in .4s;
}

.dialog-fade-leave-active {
  animation: dialog-fade-out .4s reverse;
}

@keyframes dialog-fade-in {
  0% {
    transform: translate3d(0, -20px, 0);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes dialog-fade-out {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(0, -20px, 0);
    opacity: 0;
  }
}

• sync修饰符

vue文档地址

<demo :money="money"  @update:money="fn1" > </demo>
fn1(value){
    money = value
}

可以简写成

<demo :money.sync="money" > </demo>

• scoped的作用:

1.scoped会给当前组件的模板中所有的元素都添加上一个随机的属性data-xxxx
2.scoped会给当前组件中所有的样式，都添加一个对应的属性选择器

组件库不用加上scoped,类名能确定唯一情况，否则可能会造成 父组件修改子组件的样式无效
1.加上scoped，会出现 .xx-button:first-child[data-v-229ee358] 找不到这个组件的情况
2.虽然可以通过深度选择器解决这个问题::v-deep.xx-button:first-child，可以找到子组件中的元素覆盖样式

• 深度选择器：

  作用就是去除属性选择器.hm-button:first-child[data-v-229ee358] —> .hm-button:first-child
  scss: ::v-deep
  less: /deep/
  css : >>>

• 事件修饰符

.self ： 只有点自己才触发，只当在 event.target 是当前元素自身时触发处理函数，防止事件冒泡对自己的影响
.stop ： 取消事件的冒泡事件

• props的注意事项

props 是只读的，父组件传进来的值只读的，不要在子组件中修改它（单向数据流），否则会报错

• v-model 本质上就是一个语法糖

<input   type="text" v-model="username"   />

等价于

<input   type="text" 
 :value="username" 
 @input="username=$event.target.value"   />

• provide与inject

vue文档地址

这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。
provide 选项应该是一个对象或返回一个对象的函数。
inject 选项 应该是一个字符串数组，或一个对象
具体使用：
父组件中：

export default {
  name: 'RadioGroup',
  provide () {
    return {
      RadioGroup: this
    }
  },
  props: {
   
  }
}

子组件中：

export default {
  name: 'HmRadio',
	 inject: {
	  RadioGroup: {
	    default: ''
	  }
	},
  methods:{
     test(){
       console.log(this.RadioGroup)
     }
  }
}