javascript - VueJS v-model 和组件之间的数据绑定(bind)

Question

我对 vuejs 如何绑定(bind)数据有疑问。我有一个父 Vue.component，它处理我的表单布局，我有一个子 vue.component，它处理不同的输入组。当我将来提交表单时，我无法从子组件获取数据以与父组件同步。

我目前的文件是这样的:

var title = "";
Vue.component('create_new_entry', {
    template: '<div><div class="row"><h1 v-on:click="test()">{{title}}</h1><div class="col-md-12"><section_title></section_title></div></div></div>',
    data    : function() {
        return {
            title: title
        };
    },
});
Vue.component('section_title', {
    template: '<div><h1 v-on:click="test()">{{title}}</h1><input type="text" class="form-control" v-model="title"></div>',
    data    : function() {
        return {
            title: title
        };
    },
    methods : {
        test: function() {
            console.log(this);
        }
    }
});

我不确定我哪里出错了，尽管我尝试了很多文档，但我仍然无法解决数据绑定(bind)和更新的问题。

Answer 1

您声明了两个完全独立的字段，每个组件一个，除了它们共享相同的名称外，没有任何东西将它们捆绑在一起。 Vue 将它们视为两个独立的字段，当一个更改时，另一个不更改。这些字段是组件实例的私有(private)和内部字段。

共享状态应该作为 props 向下传递给子组件，并且应该作为事件向上传递给父组件。有几种方法可以解决这个问题，最简单的方法是添加 Prop 和事件。更复杂的方法是使用状态管理工具，如 vuex。 https://github.com/vuejs/vuex

这是一个使用 Prop 和事件的简单示例。

Prop 文档:https://v2.vuejs.org/v2/guide/components.html#Props

事件文档:https://v2.vuejs.org/v2/guide/components.html#Custom-Events

var title = "";
Vue.component('create_new_entry', {
    template: '<div><div class="row"><h1 v-on:click="test()">{{title}}</h1><div class="col-md-12"><section_title :title="title" @title-changed="changeTitle"></section_title></div></div></div>',
    data    : function() {
        return {
            title: title
        };
    },
    methods: {
        changeTitle(newTitle) {
            this.title = newTitle;
        }
    }
});
Vue.component('section_title', {
    template: '<div><h1 v-on:click="test()">{{title}}</h1><input type="text" class="form-control" v-model="innerTitle"></div>',
    props: ['title'],
    data    : function() {
        return {
            innerTitle: this.title
        };
    },
    methods : {
        test: function() {
            console.log(this);
        }
    },
    watch: {
        title(val){
            this.innerTitle = val;
        },
        innerTitle(val) {
            this.$emit('title-changed', val);
        }
    }
});

父组件将其标题组件向下传递给子组件，以便它可以访问它。子组件无法修改其 props，因此它将 prop 的值复制到本地数据字段 innerTitle。子组件中的 input 使用 v-model 绑定(bind)到 innerTitle。在 innerTitle 上添加了一个 watch，这样只要它发生变化，它就会发出一个事件 title-changed。父组件监听 title-changed 事件，每当它发生时，父组件都会将其 title 字段更新为新值。

子组件还监视 title 属性，这样如果父组件的标题值因任何其他原因发生变化，子组件将能够更新其内部状态以匹配父组件的新状态值(value)。

如前所述，您还可以使用 Vuex，或使用另一个 Vue 实例作为总线，如此处所述 https://v2.vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication