vue中如何实现双向绑定的3中方法（.sync/v-model和普通交互）

目录

参考文章

需求

1、第一步、全局子组件定义child

2、第二步、放官网select例子

3、第三步、普通的父子交互方法

1.1在上面的基础例子上的methods里面添加commit方法：

1.2在父页面中利用方法去获取子页面内容：

1.3实际效果gif

4、第四步、sync的watch方法

5、第五步、v-model的双向绑定

1.1、声明传过来的值付赋给什么属性

1.2、this.$emit

 1.3、子页面增加v-model和event绑定

总结

全局代码

1、child.js

2、demo.html

3、效果图

---

---

• 参考文章

1. vue 实现父组件和子组件之间的数据双向绑定

2. 深入理解vue 修饰符sync【 vue sync修饰符示例】

3. 彻底明白VUE修饰符sync

• 需求

当子页面数据发生变化的时候，父页面的结果也需要更新，由于数据是单向传递，是不可以直接需改父页面的数据，那么我们该怎么操作呢？本篇文章可以利用2种方式（sync、v-model）实现效果都是一样的，区别在于一个要在父页面声明传递的数据对象，一个是在子页面去解析传递的对象是给什么data里面的属性。

我们从官网element-ui中拿一个select下拉框来做实验：

1、第一步、全局子组件定义child

Vue.component("child", {
    data: function () {
        return {}
    },
    template: ``,
    methods:{}
});

2、第二步、放官网select例子

Vue.component("child", {
    data: function () {
        return {
            options: [{
                value: '选项1',
                label: '黄金糕'
            }, {
                value: '选项2',
                label: '双皮奶'
            }, {
                value: '选项3',
                label: '蚵仔煎'
            }, {
                value: '选项4',
                label: '龙须面'
            }, {
                value: '选项5',
                label: '北京烤鸭'
            }],
            value: ''
        }
    },
    template: `
                <div>
                    <el-select v-model="value" placeholder="请选择">
                        <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                    </el-select>
                </div>
               `,
    methods: {
        
    }
});

3、第三步、普通的父子交互方法

1.1在上面的基础例子上的methods里面添加commit方法：

 methods: {
        commit() {
            this.$emit('output', this.value);
        },