当前位置：首页 > article >正文

Vue2中父子组件通信双向绑定

article 2024/11/15 17:00:29

一.使用.sync修饰符

在vue2中，如果想使用比较简单的方式来实现父组件向子组件传递参数并实现双向绑定。在父组件中，使用.sync修饰符来传递参数给子组件，并实现双向绑定；在子组件中，通过$emit方法触发一个自定义事件，并传递更新后的值给父组件。

父组件中：

<template>
<div>
    <p>父组件的数据：{{ parentData }}</p>
    <Child :childData.sync="parentData"></Child>
</div>
</template>
<script>
import Child from './Child.vue'
export default{
    components:{
     Child
    },
    data(){
        return{
            parentData:''
        };
    }
};
</script>

子组件中：

<template>
<div>
    <input type="text" v-model="childData">
    <button @click="updateP">数据更改</button>
</div>
</template>
<script>
export default{
    props:['childData'],
    methods:{
        updateP(){
            this.$emit('update:childData',this.childData)
        }
    }
}
</script>

在上述代码的演示中，使用:childData.sync来传递参数给子组件，并实现双向绑定，在子组件中使用$emit方法触发一个名为updata:childData的自定义事件，并且将子组件的childData作为参数传递给父组件。通过上述操作，父子组件之间实现了双向绑定，父组件中数据的变化会同步到子组件，子组件中数据的变化也会同步到父组件。

二.在子组件中使用model选项

父组件中：

<template>
<div>
    <p>父组件的数据：{{ parentData }}</p>
    <Child v-model="parentData"></Child>
</div>
</template>
<script>
import Child from './Child.vue'
export default{
    components:{
     Child
    },
    data(){
        return{
            parentData:''
        };
    }
};
</script>

子组件：

<template>
<div>
    <input type="text" v-model="dialog">
    <button @click="updateP">数据更改</button>
</div>
</template>
<script>
export default{
    model:{
      prop:'dialog',
      event:'change'
    },
    props:['dialog'],
    methods:{
        updateP(){
            this.$emit('change',this.dialog)
        }
    }
}
</script>

在子组件中，通过定义model选项来定义父组件中传递的prop属性名字为dialog,触发事件的名称为change，在父组件中，通过使用v-model指令将父组件的parentData属性双向绑定到子组件的dialog属性上。当子组件中的数据发生变化时，通过$emit方法触发一个名为change的自定义事件，并且将子组件中的dialog作为参数传递给父组件。通过这种方法父子组件之间就实现了双向绑定，父组件中的数据变化会同步到子组件，子组件中的数据变化也会同步到父组件。

查看全文

http://www.kler.cn/a/308887.html