vue封装UI组件库

（一）知识点

1.插槽

<slot v-if="$slots.default"> 是否有默认插槽
具名插槽 <template v-slot:title>this is title</template>
<template v-if="$slots.footer"> 是否有footer插槽

2.vue-devtool开发工具

可以在component的data里面操作值

3..self修饰符

<div @click.self="handleClose">  点击只触发div自己

4.子组件修改父组件属性

修改父组件属性：$parent

.sync修饰符: 子组件可修改props属性
<Child :money.sync="money">语法糖 -> <Child :money="money" @update:money="fn">

5.vue动画

<transition name='fade'>
　　<div v-if="visible"></div>
</transition>
// css 定义动画效果
.fade-enter{...}

　

6.v-model

语法糖

 <input type="text" v-model="username">相当于 <input type="text" :value="username" @input="username=$event.target.value">