Day01-Vue的高级特性

自定义v-model

父组件：

 <HelloWorld v-model="val"/>
 data() {
    return {
      val:"123"
    }

子组件：

 <input type="text" :value="val" @input="$emit('change',$event.target.value)" >
   model:{
    prop:"val",
    event:"change"
  },
  props: {
    val:String
  }
}

$nextTick

众所周知Vue是数据驱动视图的，但数据被更改后，相关模板不是马上被渲染的，如果在更改数据之后紧接着获取相关节点，会发现获取到的还是未更改的数据；

<span ref="text">{{msg}}</span>
<button @click = "handler">change</button>


data: msg:"这是更改前的数据" 

handler(){
      this.msg = "更改了1"
      this.msg = "更改了2"
      this.msg = "更改了"
      console.log("点击了更改按钮")
      console.log(this.$refs.text.innerText)
    }

如图：点击change按钮，将msg改为“更改了”，打印节点innerText

点击后：数据变了，但是打印出来的依旧是之前的数据；让我们使用$nextTick看看；

 handler(){
      this.msg = "更改了1"
      this.msg = "更改了2"
      this.msg = "更改了"
      console.log("点击了更改按钮")
      this.$nextTick(()=>{
        console.log(this.$refs.text.innerText)
      })
    }

可以看到，$nextTick方法中回调里的逻辑，会在节点渲染完成之后再执行；

slot

一般插槽

 //父组件
 <HelloWorld>
      {{msg}}
    </HelloWorld>
msg:"插槽内容"
//子组件
<template>
  <div class="hello">
   <slot>
      这是默认值
   </slot>
  </div>
</template>

结果：

具名插槽

 //父组件
<HelloWorld>
      <template v-slot:header>
        <div>
          {{msg}}
        </div>
      </template>
      <template v-slot:main>
        <div>
          {{main}}
        </div>
      </template>
    </HelloWorld>
    
  msg:"插槽内容",
  main:"main"
//子组件
<template>
  <div class="hello">
   <slot name="header">
      这是默认值1
   </slot>
   <slot name="header">
      这是默认值2
   </slot>
  </div>
</template>

能够看出，子组件插槽中的数据，是通过拿到父组件v-slot:插槽名，与自己name=“插槽名”匹配的数据，并且能够父与子 一对多的形式；

作用域插槽

动态、异步组件

动态组件

对于不确定用什么组件的情况，我能能够通过动态组件，在特定情况使用特定组件，例如：新闻页面，每篇新闻或文章的布局不同，则会用到动态组件；
见代码：

<component v-bind:is="HelloWorld">
      <template v-slot:header>
        <div>
          {{msg}}
        </div>
      </template>
      <template v-slot:main>
        <div>
          {{main}}
        </div>
      </template>
 </component>
 data() {
    return {
      msg:"插槽内容",
      main:"main",
      HelloWorld:"HelloWorld"
    }
components: {
    HelloWorld
  }

异步组件

对于一些比较大的组件，我们还是按照组件加载时，就引入子组件的话，会导致页面卡顿，这个时候我们需要使用组件懒加载的方式，引入组件；
见代码：

components: {
    HelloWorld:()=>import("@/components/HelloWorld.vue")
  }

keep-alive

keep-alive能够在组件第一次被创建的时候，将组件缓存下来，它有啥用嘞，比如我们要做一个选项卡，如果使用v-if,每次切换都会将之前的组件销毁，再创建一个新的组件，频繁切换，十分消耗性能，如果使用v-show,那么页面加载的时候，所有的组件都会被加载，如果组件体积较大，同样性能，但keep-alive不同，使用keep-alive搭配异步组件，这样的话组件加载的时候，只会加载第一个组件，切换的时候也不会销毁上一个组件，这样能大大的优化性能，写法看代码：

不想敲了，懂了就行
<keep-alive>
需要缓存的组件
</keep-alive>
包着就行

mixin

混入 (mixins)： 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。

mixin.js
export default {
  data() {
    return {
     mixinData:"mixinData"
    }
  },
  methods:{
    handler(){
      console.log("mixin的事件")
    }
  }
};

vue
<div @click="handler">
     mixin:{{mixinData}}
   </div>