1.自定义v-model
- 使用场景比如vue颜色选择 。
- 引用子组件时通过绑定
v-model="xxx"，xxx为父组件中data的属性；当修改子组件中输入框的内容时，父组件中的xxx属性值也会跟着一起变化。
代码实例：
// 子组件内容
<template>
<div>
<input type="text" :value="myText" @input="handleInput($event)" />
</div>
</template>
<script>
export default {
model: {
prop: "myText", // 对应props的myText
event:'changeVal' // 对应emit的方法名字 },
props: {
myText: {
type: String,
default: "",
//required: false,
},
},
methods: {
handleInput(event) {
this.$emit("changeVal", event.target.value); //对应model中的event内容
},
},
};</script>
// 父组件内容
<template>
<div>
// 会跟随子组件input框输入的内容变化而变化
<my-vmodel v-model="name"></my-vmodel>
<p>{{name}}</p>
</div>
</template>
<script>
import MyVmodel from './MyVmodel.vue'
export default {
components:{
MyVmodel
},
data(){
return {
name:'ncy'
}
}
}
</script>
2.$nextTick
- 为什么要使用
$nextTick？
-
vue是异步渲染
-
data改变之后，Dom不会立刻渲染，页面渲染时会将data的修改做整合，多次data修改只会渲染一次。 -
$neckTick会在DOM渲染之后被触发，以获取最新DOM节点应用常见，项目中遇到需要操作DOM，比如引入的编辑器。
代码实例：
<ul ref=“ul1”></ul>
//通过this.$refs.ul1拿到
this.$nextTick(()=>{
const ulElem = this.$refs.ul1
})
3.slot 插槽
（1）基本使用：下面例子中显示的是父组件data里面的内容。
（2）如果是需要把子组件的data数据暴露给父组件，那么可以使用作用域插槽。
（3）具名插槽，slot标签的name属性值，对应模版中的v-slot:name，多个具名插槽一起使用。
4.动态组件
demo1:
import Text from './components/Text.vue'
data(){ return { componentName: Text // 必须的步骤 } }
demo2:
import Text from './components/Text.vue'
import Image from './components/Image.vue'
data(){ return { componentsList:[ {id: 1, type:"Text"}, {id: 2, type:"Image"}, ] } }
5.异步组件：
components:{ FormDemo: ()=> import from './components/FormDemo' }
6.keep-alive
缓存组件，很大的tab组件之间切换，使用后再次切换时不会重新渲染或者销毁组件。 与使用v-show的差别，v-show是单纯的css操作，keep-alive是vue层面的操作。
7.mixin 抽离多个组件中相同的逻辑，mixin并不是完美的，存在一些问题： 变量来源不明，不利于其他人阅读； 造成命名冲突； mixin和组件会出现多对多的关系，复杂度较高；
