请问vuejs里的v-model 和:model有啥区别

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了请问vuejs里的v-model 和:model有啥区别相关的知识,希望对你有一定的参考价值。

    v-model是内置的数据双向绑定:

    model是绑定自定义属性model ,model相当于 v-bind:model

    Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手,还便于与第三方库或既有项目整合。

    另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动。

参考技术A v-model是内置的数据双向绑定
:model是绑定自定义属性model
:model相当于 v-bind:model本回答被提问者和网友采纳

VueJS v-model 和组件之间的数据绑定

【中文标题】VueJS v-model 和组件之间的数据绑定【英文标题】:VueJS v-model and data binding between components 【发布时间】:2018-06-08 04:15:04 【问题描述】:

vuejs 绑定数据的方式有问题。我有一个父 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);
        
    
);

我不确定我哪里出错了,尽管我尝试查看文档,但我仍然无法解决如何绑定和更新数据。

【问题讨论】:

【参考方案1】:

您正在声明两个完全独立的字段,每个组件中都有一个,除了它们共享相同的名称之外,没有任何东西将它们联系在一起。 Vue 将它们视为两个独立的字段,当一个更改时,另一个不变。这些字段是组件实例的私有和内部字段。

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

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

道具文档: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);
        
    
);

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

子组件在 title 属性上也有一个监视,因此如果父组件的标题值因任何其他原因发生更改,子组件将能够更新其内部状态以匹配父组件的新值。

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

【讨论】:

非常感谢!这真是很棒的解释。我见过其他这样的人,但从来没有像这样清楚地表达过,所以我一直不明白。谢谢

以上是关于请问vuejs里的v-model 和:model有啥区别的主要内容,如果未能解决你的问题,请参考以下文章

VueJS:同时使用 v-model 和 :value

VueJS 从子级更改 v-model 变量

vuejs - v-model 不更新类属性

VueJS v3、Vuex 和 Composition API 以及输入字段上的 v-model

输入中的真/假(vuejs),可能没有 v-model

v-model 不使用开关更改数据并选择 vuejs 中的下拉菜单