vue之组件之间双向数据绑定简介父子组件事件监听v-modelsync修饰符

46 阅读 0 评论 31 点赞

我是靠谱客的博主酷炫芝麻，最近开发中收集的这篇文章主要介绍vue之组件之间双向数据绑定简介父子组件事件监听v-modelsync修饰符，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

简介

组件之间实现双向绑定有很多种方法，如

绑定对象，利用是引用关系，但是，这样会容易造成数据混乱，而且违背了props单项数据流的概念，所以不建议使用。
父子组件事件通讯
v-model
sync修饰符

下面就详细介绍下后三种方法。

父子组件事件监听

<template>
    <div>
       {{value}}
       <input-model @changeData="getValue" :value="value"></input-model>
    </div>
</template>
<script>
import inputModel from "./input.vue"
export default {
    data(){
        return{
            value:"hty"
        }
    },
    components:{
        inputModel,
    },
    methods: {
        getValue(value){
            this.value=value
        }
    },
}
</script>

//input.vue
<template>
    <div>
        <input type="text" @input="changes" :value="value1">
    </div>
</template>
<script>
export default {
    props:['value'],
    data(){
        return{

        }
    },
    methods: {
        changes(e){
            this.$emit("changeData",e.target.value)
        }
    }
}
</script>

v-model

<template>
    <div>
       {{value}}
       <input-model v-model="value"></input-model>
    </div>
</template>
<script>
import inputModel from "./input.vue"
export default {
    data(){
        return{
            value:"hty"
        }
    },
    components:{
        inputModel,
    },
    methods: {
        getValue(value){
            this.value=value
        }
    },
}
</script>

//input.vue
<template>
    <div>
        <input type="text" @input="changes" :value="value">
    </div>
</template>
<script>
export default {
    props:['value'],
    data(){
        return{

        }
    },
    methods: {
        changes(e){
            this.$emit("input",e.target.value)
        }
    }
}
</script>

这里需要注意的是：
一个组件上的v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value 特性用于不同的目的。
所以这里我需要用model选择来避免这样的冲突。
这里将子组件做出以下改变：

<template>
    <div>
        <input type="text" @input="changes" :value="value1">
    </div>
</template>
<script>
export default {
	//model自定义props和emit事件
    model:{
        prop: 'value1',  
        event:"changeData"
    },
    props:['value1'],
    data(){
        return{

        }
    },
    methods: {
        changes(e){
            this.$emit("changeData",e.target.value)
        }
    }
}
</script>

sync修饰符

<template>
    <div>
       {{value}}
       <input-model @update="getValue" :value="value"></input-model>
       <!--简写-->
       <!--<input-model  :value.sync="value"></input-model>-->
    </div>
</template>
<script>
import inputModel from "./input.vue"
export default {
    data(){
        return{
            value:"hty"
        }
    },
    components:{
        inputModel,
    },
    methods: {
        getValue(value){
            this.value=value
        }
    },
}
</script>

//input.vue
<template>
    <div>
        <input type="text" @input="changes" :value="value">
    </div>
</template>
<script>
export default {
    props:['value'],
    data(){
        return{

        }
    },
    methods: {
        changes(e){
            this.$emit("update:value",e.target.value)
        }
    }
}
</script>