mixin混入，插槽，过滤器

Mixins混入：把各个组件下相同的js部分提取出来，分发给每一个用到的组件，这样可以减少代码量进行优化，但是分发到各个组件下的数据都是相互独立的

在组件下引入混入的内容:import minxi

在子组件内先引入
import mixis from ‘./…/…/…/mixin’

然后派发 mixins:[mixis] （mixis为提出来的公共部分的js文件)

nextTick(()=>{}): vue在方法下去改动data下的值之后，在方法中不能够直接取到改变过后的值，而拿到的是data下声明的初始值，需要通过使用$nextTick方法取到改变后的值

如：this.$nextTick(()=>{
       
          this.msg1="hello vue"
      })

插槽:在子组件调用处的中间插入HTML的内容，叫做插槽

<ChildA>中间插入的内容就是插槽</ChildA>

• 具名插槽：在子组件分发插槽处，寻找父组件对应的插槽名字，把相应的HTML内容渲染到子组件中，注意HTML结构，如果不写名字，默认名字为default

  在父组件下：
  <ChildA>
  <template v-slot:header>//此处header为插槽的名字
      <h1>Here might be a page title</h1>
    </template>
  </ChildA>
  
  在子组件下：
   <slot name="header"></slot>
  

• 作用域插槽：子组件的数据传递给父组件时，使用作用域插槽

  在父组件下：
  
  <ChildA>
    <template #:default="slotProps">
      <ul>
        <li v-for="item of slotProps.list" :key="item">{
        {item}</li>
      </ul>
    </template>
  </ChildA> 
  
  在子组件下:
  <slot v-bind:list="list"></slot>
  data() {
      return { 
          list:["HTML",'CSS',"JS"]
       		};
    		}
  v-slot #缩写
  

过滤：

• 全局过滤器：（main.js）下:Vue.filter(“cap”.回调函数return)

  Vue.filter('cap',function(v){
    console.log(v)
    return v.toUpperCase()//返回大写
  })
  
  <!-- 在双花括号中 -->
  {
        { message | cap}}//message为data（）下定义的
  
  <!-- 在 `v-bind` 中 -->
  <div v-bind:id="rawId | formatId"></div>
  
  过滤器可以串联：
  
  {
        { message | filterA | filterB }}
  

• 局部过滤器：（组件下） :

  Vue.filters:{

  过滤器名字：回调函数

  }

  data（）{}，
    filters:{
        chart:function(v) {
          return v.charAt(1)
        }
      }
  }