v-model的使用

最新推荐文章于 2024-04-09 14:48:57 发布

yaxi_yaxi_yaxi

最新推荐文章于 2024-04-09 14:48:57 发布

阅读量898

点赞数

分类专栏： vue 文章标签： v-mode vue

本文链接：https://blog.csdn.net/qq_35176916/article/details/87921964

版权

vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

组件中v-model的使用：

v2.2以前的版本是这样应用的，

<body>
    <div id="app">
        <h1>组件中v-model的使用</h1>
        <h1>1,子组件中props要有value属性，2:子组件动态绑定value至props,3，子组件触发input事件后触发$emit</h1>
       <button-counter v-model="message"></button-counter>
       {{message}}
    </div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    //定义组件
    Vue.component('button-counter',{
        data: function(){   //data必须要return。
            return {
                count:4,
            }
        },
        props:['value'],
        template:'<input v-bind:value="value" @input="child">',
        methods:{
            child: function(event){
                this.$emit('input',event.target.value)
            }
        }
    })
var app = new Vue({
  el:  '#app',
  data: {
     message: 123
  },
})
</script>
</body>

但是呢，像单选框、复选框等类型的输入控件可能会将 value 特性用于不同的目的，所以v2.2+版本后可以使用model属性来书写v-model

<body>
    <div id="app">
        <h1>组件中v-model的使用</h1>
        <h1>1,子组件中props要有**属性，2:子组件动态绑定**至props,3，子组件触发**事件后触发$emit</h1>
       <button-counter v-model="message"></button-counter>
       {{message}}
    </div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    //定义组件
    Vue.component('button-counter',{
        modle: {
           //prop: 'changed',
             prop: 'nice'
           event: 'change' 
           },
        data: function(){   //data必须要return。
            return {
                count:4,
            }
        },
        props:['chnaged'],
        template:'<input v-bind:changed="nice" @change="child">',
        methods:{
            child: function(event){
                this.$emit('input',event.target.value)
            }
        }
    })
var app = new Vue({
  el:  '#app',
  data: {
     message: 123
  },
})
</script>
</body>

这样组件中使用v-model就不受value和input的限制了。

yaxi_yaxi_yaxi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
v-model的使用

组件中v-model的使用：v2.2以前的版本是这样应用的，&lt;body&gt; &lt;div id="app"&gt; &lt;h1&gt;组件中v-model的使用&lt;/h1&gt; &lt;h1&gt;1,子组件中props要有value属性，2:子组件动态绑定value至props,3，子组件触发input事件后触发$emit&l..
复制链接

扫一扫

专栏目录