2020-05-18

10.组件基础
类似于bootstrap，但是和bs完全不再一个级别，vue组件是封装了js,html,css的独立单元，我们可以使用虚拟标签直接调用 目前比较成熟的组件库： pc: elementui 饿了么 antdesign 蚂蚁金服 phone(小程序): mintui vantui … 语法：
1. 组件定义（比较麻烦-了解）
一个组件就是一个vue的最小单元 1） 全局注册
Vue.component(‘briup-alert’,{
与Vue构造函数参数类似
template:html,
data(){ // 保证每一个组件都有一份独立的data
return {
}
},
props:[‘title’] // 期望从父组件中接收到的变量 })
2）局部注册
2. 组件调用（精通）

11.高级组件

1. 组件参数的传递
   1. 基础
   组件声明
   briup-info,{
   template:, data(){}, props:["visible"] // 形式参数，期望父组件传递给子组件的参数 } 组件调用 <briup-info visible="true"/> 在调用briup-info这个组件的时候，传递了一个参数为visible，值是一个字符串'true' <briup-info :visible="true"/> 在调用briup-info这个组件的时候，传递了一个参数为visible，值是一个布尔类型true <briup-info :visible="1"/> 在调用briup-info这个组件的时候，传递了一个参数为visible，值是一个number类型的1 <briup-info :visible="{name:'terry'}"/> 在调用briup-info这个组件的时候，传递了一个参数为visible，值是一个对象 {name:"terry"} <briup-info :visible="[1,2,3]"/> 在调用briup-info这个组件的时候，传递了一个参数为visible，值是一个数组[1,2,3] 2. 参数类型声明 1) 组件声明 briup-info,{ template:,
   data(){},
   props:{
   visible:Boolean,
   title:String
   }
   }
   2) 组件调用
   
   
   data:{
   isVisible:true
   }
   2) 单向数据流
   父组件 ------> 子组件 (变量)
   显示 visible v-if=“visible” true
   显示 false 隐藏
   千万记住，在组件中不要直接改变父组件传递过来参数
   3) 自定义事件
   父组件 <------ 子组件
   父组件通过@xxx监听
   子组件通过this.$emit(‘xxx’)，通知父组件,父组件进行变量的修改
   4) 插槽
   通过slot标签来接收父组件传递过来的子模板 参数模板传递
   组件定义：
   my-test template:<div> {{title}} <slot name="header"></slot> <slot name="footer"></slot> </div> props:{title:String}