vue2 高级特性

高级特性

1. 自定义v-model
2. $nextTick
3. slot
4. 动态组件
5. 异步组件
6. keep-alive
7. mixin

自定义v-model

父组件：index.vue

<template>
    <p>{{ name }}</p>
    <CustomVModelVue  v-model="name" />
</template>
<script>
import CustomVModelVue from './CustomVModel.vue';
export default {
    components:{
        CustomVModelVue
    },
    data(){
        return {
            name:'自定义model'
        }
    }
}
</script>
<style lang="less" scoped>

</style>

子组件：CustomVModelVue.vue

<template>
    {{ content }}
    <input type="text" :value="content" @input="$emit('change', $event.target.value)" >
</template>

<script>
    export default {
        model:{
            prop:'content',
            event:'change'
        },
        props:['content'],
        mounted() {
            console.log(this)
        },
    }
</script>
<style lang="less" scoped>

</style>