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

我在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)和更新数据方面遇到麻烦。

最佳答案

您要声明两个完全独立的字段，每个组件一个，除了将它们共享相同的名称之外，没有将它们 bundle 在一起的任何方法。 Vue将其视为两个单独的字段，当一个更改时，另一个则不更改。这些字段是私有(private)的，并且在组件实例内部。

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

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

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

事件文档:https://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);
        }
    }
});

父组件将其标题组件向下传递给子组件，因此它可以访问它。子组件无法修改其 Prop ，因此它将 Prop 的值复制到本地数据字段innerTitle。子组件中的input使用v-model绑定(bind)到innerTitle。在innerTitle上添加了一个手表，以便它每次更改时都会发出事件title-changed。父组件侦听title-changed事件，并且每当发生事件时，父组件都会将其标题字段更新为该新值。

子组件在title Prop 上也有一个监视对象，因此，如果父组件的标题值由于任何其他原因而改变，则子组件将能够更新其内部状态以匹配父组件的新值。

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