自定义组件如何使用v-model,v-model的双向绑定原理(详细)

小小澜孩

已于 2023-04-26 17:06:01 修改

阅读量898

点赞数 2

文章标签： javascript vue.js 开发语言

于 2023-04-26 16:44:24 首次发布

本文链接：https://blog.csdn.net/m0_62956518/article/details/130388924

版权

v-model的双向绑定原理主要涉及父组件向子组件传递值和子组件回传值。它通过:value将父组件的值传给子组件，然后子组件通过this.$emit(input,value)触发事件将值回传给父组件。在示例中，父组件通过v-model绑定modeldata，子组件接收到value并可修改，点击按钮触发值的传递。

摘要由CSDN通过智能技术生成

v-model的双向绑定原理其实很简单,

就是父传子加上子传父

v-model的底层实际上就是:value='value' 将父组件的值传递给子组件

然后在子组件通过触发this.$emit('input', value)子传父将值传回给父组件

下面上代码:

父组件:

在父组件内引入子组件并使用

<template>
	<view>
		父组件
		<child v-model="modeldata" ></child>
	</view>
</template>

<script>
    //在父组件内引入子组件并使用
	import child from './child.vue'
	export default {
		components:{
			child
		},
		data() {
			return {
				modeldata:undefined,//绑定的值
			}
		},
		methods: {
			
		}
	}
</script>

<style>

</style>

子组件:

<template>
	<view class="">
		子组件
		<input type="text"  placeholder="请输入" v-model="value">
       <!-- 为了更清晰的表现出子组件将值传给父组件,使用按钮来触发传值事件 -->
       <!-- 如需有变动直接触发子传父请自行理解该方法 -->
		<button @click="change">将值传递给父组件</button>
	</view>
</template>

<script>
	export default {
		props: {
           //这个value值是不是没看到在父组件穿过来呢
           //其实是传了的,前面说过,v-model绑定的值首先就是通过:value将值传到子组件
           //所以这个value的值就是你v-model绑定的值
			value: {
				type: String, //value的类型
				default: "15" //value的默认值,但父组件未使用v-model或者:value时,value值默认为该值
			}
		},
		data() {
			return {}
		},
		methods: {
			change() {
				//this.$emit为子组件传值给父组件使用,需要通过事件来触发
				//第一个参数为父组件标签内调用
				//例:第一个参数为'change'时,父组件标签内调用为@change='change'(函数名),
				//在js中methods使用:change(e){}
				//e为this.$emit的第二个参数,也就是需要传给父组件的值
                //当this.$emit的第一个参数为'value'时,父组件就可以使用v-model接到数据
				this.$emit('input', this.value)
			}
		}
	}
</script>

<style>
</style>