vue day3+4

模块化(组件)
vue中模块是最小组成单元

1. 组件定义
   vue参数的定义过程
   let briupList = {
   template:`

   { {}}
   `, data(){ return {

   }
   },
   methods:{}
   }

2. 组件注册

 1) 全局注册将组件注册到Vue上，所有组件均可用Vue.component('briup-list',briupList)2) 局部注册将组件注册到某个组件内部，只有该组件才能使用这个组件let ArticlePage = {template:``,data(){return {}},components:{'briup-list':briupList}}

3. 参数传递
   组件内部如何接受传递的参数？
   形参
   let briupList = {
   props:[‘data’]
   }

   形参、类型限制
   let briupList = {
   props:{
   data:Array
   }
   }

   形参、类型限制、校验
   let briupList = {
   props:{
   data:{
   type:Array,
   default:[],
   validator:function(val){
   }
   }
   }
   }
   如何传递参数？如何传递number/boolean
   参数传递实际上就是属性绑定

4. 插槽
   简单插槽
   具名插槽
   component: article-page

   调用

 作用域插槽作用域插槽可以通过回调函数的思想来理解component: briup-list<ul><li v-for="item in data"><slot v-bind:row="item"></slot></li></ul>component: article-page<briup-list><div slot-scope="scope">{
     {scope.row.xxx}}</div></briup-list>父组件调用子组件，子组件在执行过程中又返回调用父组件的内容【插槽】，在调用过程中通过v-bind为这个插槽传递参数。在父中间通过slot-scope="scope"中的scope来获取传递过来的参数，进行自定义渲染

5. 事件发射 $emit
   $emit 可以触发监控在当前组件上的指定事件

 briup-info<div>{
     {msg}}<button @click="closeHandler">关闭</button></div>methods:{closeHandler(){this.$emit('close',1)}}article-page<briup-info @close="close"></briup-info>methods:{close(num){alert(num);}}

9. render函数
   ast 抽象语法树
   将模板编译（解析）为一个虚拟节点(节点描述)
   {
   render(h){
   return h(tag,{},child)
   }
   props:{},
   data(){
   return {

   }
   }
   }

10. 指令
    v-on、v-bind、v-for、v-if、v-show…

1. 全局注册
   Vue.directive(’’,{
   生命周期钩子:function(el,binding,vnonde){

   }
   })

2. 局部注册
   {
   directives:{
   ‘’:{

   }
   }
   }

11. 过滤器
    时间 - 时间戳 ， 当前时间到格林威治标准时间的时间差
    new Date().getTime();

1634010195568
2021-12-12 11:40

录入时间
1634010195568 转换为任意格式
2021-10-12 11:40

1. 全局注册
   Vue.filter(‘formatTime’,function(val){
   return moment(val).format(‘YYYY-MM-DD hh:mm’);
   })
   Vue.filter(‘formatDate’,function(val){
   return moment(val).format(‘YYYY-MM-DD’);
   })

2. 局部注册
   {
   filters:{
   formatDate(val){
   return moment(val).format(‘YYYY-MM-DD’);
   }
   }
   }

12. 插件
    Vue

12. 混入mixin