vue高级特性

自定义v-model

// 父组件
<template>
  <p>{{name}}</p>
  <Child v-model="name">
</template>
<script>
export default {
  data() {
    return {
      name: 'hahaha'
    }
  }
}
</script>
// 子组件Child
<template>
  <input type="text" :value="name" @input="@emit('change', $event.target.value)">
</template>
<script>
export default {
  model: {
    prop: 'name',
    event: 'change'
  },
  props: {
    name: String,
    default: ''
  }
}
</script>

$nextTick

vue 是异步渲染的
data 改变之后，DOM不会立刻渲染
$nextTick 会在DOM渲染之后被触发，以获取最新的DOM节点

slot

子组件通过 slot 接收 父组件的字节点
匿名插槽< slot></ slot>
具名插槽< slot name=“up”></ slot>

作用域插槽（父组件可以获取到子组件的数据）

// 父组件
<Child>
	<template v-slot="scope">
	    {{ scope.data.name }}
	</template>
</Child>
// 子组件Child
<p>
	<slot :data="data"></slot>
</p>
data() {
  return {
    data: {
      name: 'yq',
      age: 22
    }
  }
}

动态、异步组件

动态组件 component

// 项目中dialog常用
<component
  :is="activatedComponent"
  @refresh="baseData"
  @closed="activatedComponent = null;dialogData = null"
/>

异步组件

• import() 函数
  components: {
  Demo: () => import(‘组件地址’)
  }

keep-alive 缓存组件

频繁切换，不需要重新渲染（比如 tab 下的列表页）

mixin

多个组件有相同的逻辑，抽离出来（会有些不完美的问题）
Vue3 提出 Composition API 可以解决 mixin 的一些问题

会进行一个混和

// 一个mixin
export default {
  data() {
    return { name: 'yq' }
  },
  methods: {},
  mounted() {},
  ......
}

// 一个组件
<template>
  <div>{{ name }}</div>
</template>
<script>
import myMixin from './mixin'
export default {
  mixins: [myMixin]
}
</script>

看看 mixin 的问题

• 变量来源不明确，不利于阅读
• 多 mixin 可能会造成命名冲突，出现覆盖
• mixin 和组件可能出现多对多的关系，复杂度较高