.fade-enter-active,.fade-leave-active{过渡：不透明度.3s;}.fade-enter,.fade-leave-to{opacity:0;}.alert-box-wrapper{position:fixed;顶部：0；底部：0；左：0；右：0；显示：弹性；证明内容：居中；对齐项目：居中；背景：rgba(0,0,0,0.5);.alert-box{显示：内联块；宽度：420px；填充底部：10px；背景色：#fff；边界半径：4px；边框：1px实心#303133；字体-s大小：16px；文本对齐：左；溢出：隐藏；.alert-box-header{位置：相对；填充：15px；填充底部：10px；.alert-box-title{颜色：#303133；}.alert-box-headerbtn{位置：绝对；顶部：15px；右：15px；游标：指针；颜色：#909399；}}.alert-box-content{填充：10px15px；颜色：#606266；字体大小：14px；}.alert-box-btns{填充：5px15px0;文本对齐：右；.cancel-btn{填充：5px15px；背景：#fff；边框：1px实心#dcdfe6；边界半径：4px；大纲：无；游标：指针；}.confirm-btn{margin-left:6px;填充：5px15px；颜色：#fff；背景色：#409eff；边框：1px实心#409eff；边界半径：4px；大纲：无；游标：指针；}}}组件系统是Vue中的一个重要概念，因为它是一种抽象，允许我们使用小型、独立且经常可重用的组件来构建大型应用程序。几乎任何类型的应用程序接口都可以抽象为组件树。组件化可以提高开发效率，方便重复使用，简化调试步骤，提高项目可维护性，便于多人协同开发。组件通信props从父组件传递值给子组件//父组件//子组件props:{msg:String}自定义事件子组件传递值给父组件//父组件//子组件this.$emit('onAdd',data)在事件总线的任意两个组件之间传递值，对应的接口有已在Vue中实现。下面是实现原理，其实就是典型的发布-订阅模型。//Bus：事件派发、监听和回调管理类Bus{constructor(){this.callbacks={}}$on(name,fn){this.callbacks[name]=this.callbacks[name]||[]this.callbacks[name].push(fn)}$emit(name,args){if(this.callbacks[name]){this.callbacks[name].forEach(cb=>cb(args))}}}//main.jsVue.prototype.$bus=newBus()//组件1this.$bus.$on('add',handle)//组件2this.$bus.$emit('add')any两个vuex组件之间传值，创建一个唯一的全局数据管理器存储，通过它管理数据并通知组件状态变化。vuex官网上$parent/$roots兄弟组件之间的通信可以通过共同的祖先$parent或$root来桥接。//兄弟组件1this.$parent.$on('foo',handle)//兄弟组件2this.$parent.$emit('foo')$children父组件可以通过$children访问子组件，实现父子沟通。//父组件this.$children[0].xx='xxx'注意$children不保证顺序，也不是响应式的。$attrs/$listenners$attrs包含属性绑定（class和style除外），这些绑定在父范围内不被识别（和拾取）为props。//父组件//子组件：foo未在props中声明{{$attrs.foo}}
$listenners包含（没有.native装饰器）v-on事件侦听器。//父组件//子组件created(){console.log(this.$listeners)//{'event-one':f()}}$refs是一个对象，它包含所有使用ref属性注册的DOM元素和组件实例。mounted(){this.$refs.hw.xx='xxx'}提供/注入以允许祖先组件向其所有后代注入依赖项。//祖先组件提供provide(){return{foo:'bar'}}//后代组件注入inject:['foo']created(){console.log(this.foo)//=>"bar"}Slots槽语法是Vue实现的一种内容分发API，用于复合组件开发。该技术广泛应用于通用组件库的开发。匿名槽//comp
//parenthello命名槽将内容分发到子组件的指定位置//comp2
//parent命名插槽Content...要使用的范围插槽分发内容到子组件中的数据//comp3
//parentFromsubcomponentdata:{{slotProps.foo}}在Vue中实现alert插件，我们可以使用Vue.component(tagName,options)全局注册，或者使用组件内部的components选项注册本地组件。全局组件挂载在Vue.options.components下，而本地组件挂载在vm.$options.components下，这就是全局注册的组件可以任意使用的原因。有一些全局的组件，类似Message、Toast、Loading、Notification、Alert等，都是通过原型的方式挂载在Vue的global上的。下面来实现一个简单的Alert组件，主要是为了理解思路，先上传渲染图@/components/alert/src/Alert.vue{{title}}
