版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/w390058785/article/details/82734739
前言：父组件与子组件直接的传值会有些小问题，特别是动态传值。
一、实现动态传值
<body>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<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>
</body>运行结果
要理解该方法的关键是要知道v-model的实现原理。
二、v-model实现原理
<body>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<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>
</body>这时就可以看出来了，我们通过['value']可以获取到父组件给子组件传递的值，也可以用过注册input方法方法来通过子组件给父组件传值。