【Vue】父组件使用v-model，实现子父组件动态传值。

最新推荐文章于 2024-04-08 01:08:39 发布

红孩儿2011

最新推荐文章于 2024-04-08 01:08:39 发布

阅读量1.5k

点赞数

原文链接：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>

二、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方法方法来通过子组件给父组件传值。

优惠劵

红孩儿2011

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【Vue】父组件使用v-model，实现子父组件动态传值。

前言：父组件与子组件直接的传值会有些小问题，特别是动态传值。一、实现动态传值<body><script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script><div id="box"> <new-input v-model="name"></new-input&...
复制链接

扫一扫