首页 > 其他 > 详细

vue 利用v-model实现父子组件数据双向绑定 (input)

时间:2019-12-25 14:39:50      阅读:412      评论:0      收藏:0      [点我收藏+]

一、实现动态传值

<div id="box">
    <new-input v-model="name"></new-input>
    {{name}}
</div>
<script>
Vue.component(new-input,{
    props: [value],
    template:<label><input type="text" v-model="newValue" /> 你的名字:</label>,
    computed:{
        newValue: {
            get:function() {
                return this.value; 
            },
            set:function(value) {
                  this.$emit(input, value);
            }
        }
    },
});
new Vue({
    el:#box,    
    data: {
        name:nick        
    }
});
</script>

二、v-model实现原理

<div id="box">
<input :value="name" @input="changeValue($event.target.value)"/>
{{ name }}
</div>
<script>
new Vue({
el:#box,    
data: {
name:nick    
},
methods:{
changeValue:function(value){
this.name = value;
}    
}
});
</script>

vue 利用v-model实现父子组件数据双向绑定 (input)

原文:https://www.cnblogs.com/zhukaijie/p/12096130.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!