vue 高级特性

23

vue的高级特性包含以下几种

1.自定义v-model

2.$nextTick

3.slot

4.动态、异步组件

5.keep-alive

6.mixin

自定义v-model

   vue中默认的v-model 只接受value属性和响应input事件，如果想改变这个特性，需要引入model这个属性

   model有两个属性：

        prop：代替原来的value值

        event:代替原来的input事件

    使用$eimt向上派发事件的要与model.event中的值对应

    因此我们可以model这个属性在自己定义的组件中实现v-model 

    代码实现 vue中v-model的实现_vue 实现v-model_djtwebblog的博客-CSDN博客

$nextTick

     因为vue是异步渲染，data改变之后，dom不会立刻渲染，而$nextTick会在dom渲染完成后触发，以获取最新的dom节点

slot

     插槽，也就是slot，slot就是子组件里的一个占位符，用 表示，父组件可以在这个占位符中填充任何模板代码.   一个核心的问题，就是插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制

基本使用：让父组件往子组件里面插入一段内容，若不插入显示slot里面的默认值

  

<template>
  <div>
    <slot>
        插槽默认值
    </slot>
  </div>
</template>
<script>
    export default {
          name: 'children'
    }
</script>

<slot>代替slott的内容</slot>

作用域插槽 :    将子组件的参数传给父组件使用,该参数仅限于插槽中使用

 1.子组件存放一个带数据的插槽，代码如下：

<template>
  <div >
     <slot  :data="data"></slot>
  </div>
</template>

 export default {
    data: function(){
      return {
        data: ['子组件插槽传递数据']
      }
    }
}

2.父组件通过 “v-slot” 来接收子组件传过来的插槽数据，再根据插槽数据来填充插槽的内容     

<template>
  <div class="father">
    <h3>这里是父组件</h3>
    <!--第一次使用：用flex展示数据:  class="tmpl"-->
    <child>
      <template  v-slot="slot">
        <div class="tmpl">
          <span v-for="item in slot.data">{{item}}</span>
        </div>
      </template>

    </child>

   
  </div>
</template>

具名插槽：用name属性来表示插槽的名字，父组件在传参数的时候根据名称一一对应

<template>
	<div>
		<header>
			<slot name="header">
				<h3>没传header插槽</h3>
			</slot>
		</header>

	</div>
</template>

<style scoped>
div{
	border:1px solid #000;
}
</style>

使用

<slot>
    <template v-slot:header>
        <div >具名插槽header</div>
   </template>
    
</slot>

动态、异步组件:顾名思义就是动态加载组件和异步加载组件

   动态组件：component组件上有一个动态属性is ,如果动态属性发生改变，就会根据改变的内容渲染新组件。使用场景即，组件不太确定的使用

异步组件： 通过import函数进行加载组件，这个函数在组件使用的时候才会加载组件

使用场景：组件内容过大或多路由的时候

keep-alive：用于 缓存组件，频繁切换，不需要重复渲染的组件，Vue常见性能优化方法之一

何时需要使用keep-alive

1. 缓存组件，不需要重复渲染

1. 多个静态tab页的切换

1. 优化性能

mixin:用来抽离公共方法

  mixin 的问题：

1. 变量来源不明确，不利于阅读

1. 多 mixin 可能会造成命名冲突

1. mixin 和组件可能出现多对多的关系，复杂度较高