最近做了一个完整的vue项目，对父子组件之间的数据传递新的用法有了更深的了解，现在记录一下。

虽然标题是实现props 双向数据绑定其实VUE是不支持props数据双向绑定的，但是我们可以模拟双向绑定的样式，主要是为了简化数据更改及父子节点之前数据同步的操作。

这是我根据自己的理解写出来的，可能有不准确的地方，大家可以根据自己的理解完善。

第一种方式 v-model 的方式。

原理：利用v-model指令把数据绑定到子组件中，然后子组件中模拟普通文本框的input事件，来传递修改之后的值。 v-model的双向数据绑定的基本原理就是兼听了文本框的input事件，通过兼听input事件得知数据被修改了，同理我们可以触发自定义input事件。

//Parent.vue
<template>
    <div class="box">
        <p>发给child的modelMSG: {{modelMSG.msg}}</p>
        <p>
            修改modelMSG:
            <input type="text" v-model="modelMSG.msg" />
        </p>
        <Child v-model="modelMSG" />
    </div>
</template>

<script>
import Child from './Child'
export default {
    name: 'Parent',
    components: {
        Child,
    },
    data() {
        return {
            modelMSG: {
                msg: '发给Child的modelMSG信息',
            },
            name: 'Parent的名字',
        }
    },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
h3 {
    margin: 40px 0 0;
}
ul {
    list-style-type: none;
    padding: 0;
}
li {
    display: inline-block;
    margin: 0 10px;
}
.green {
    color: #42b983;
}
.box {
    text-align: left;
    width: 600px;
    margin: 0 auto;
}
input {
    width: 200px;
    height: 35px;
    line-height: 35px;
}
</style>

注意： v-model="modelMSG" 这里的modelMSG我是故意写成对象格式的，目的是为了表明v-model可以传对象过去，这样就可以传递多个数据了。

//Child.vue
<template>
    <div class="hello">
        <p class="red">来自Parent的value: {{value.msg}}</p>
        <p>
            <input v-model="parentModelMSG" type="text" />
        </p>
    </div>
</template>

<script>
export default {
    name: 'Child',
    props: {
        value: Object, //注意子组件接收数据时用value接收，这里的value代表 parentModelMSG
    },
    data() {
        return {
            name: '',
            parentModelMSG: this.value.msg,
        }
    },
    watch: {
        parentModelMSG() {
            this.$emit('input', { //这里也是必要的，目的是子组件修改数据的时候回传到父组件
                msg: this.parentModelMSG,
            })
        },
        'value.msg1'() { //这块是为了兼听父组件变化的时候同步parentModelMSG信息，也可以用deep的方式 value: {deep: true, handler(){ ... }}，这样可以兼听所有数据修改
            this.parentModelMSG = this.value.msg
        },
    },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
    margin: 40px 0 0;
}
ul {
    list-style-type: none;
    padding: 0;
}
li {
    display: inline-block;
    margin: 0 10px;
}
.red {
    color: #f00;
}
</style>

注意：v-model设置的属性接收时需要用value这个字段接收

扫描二维码关注公众号，回复： 7816626 查看本文章

vue props双向数据绑定方案

第一种方式 v-model 的方式。

猜你喜欢