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

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

汪小穆

9440人浏览 · 2018-09-17 11:43:23

汪小穆 · 2018-09-17 11:43:23 发布

前言：父组件与子组件直接的传值会有些小问题，特别是动态传值。

一、实现动态传值

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^