vue高级特性

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

1. 为什么要使用$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: