vue中v-model原理和sync修饰符

最新推荐文章于 2024-04-15 16:40:42 发布

happysmartgirl

最新推荐文章于 2024-04-15 16:40:42 发布

阅读量248

点赞数

分类专栏： v-model 文章标签： vue.js

本文链接：https://blog.csdn.net/happysmartgirl/article/details/109448530

版权

v-model 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

我们都知道vue中v-model是双向数据绑定，一般用在表单input框中，其实v-model可以用在组件中

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="app">
	<!--两种方法等同-->
		<test-model v-model="num" :num="num"></test-model>
		<!--<test-model :num="number" @ch="number = $event"></test-model>-->
	</div>
</body>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
Vue.component('test-model',{
//如果不写这段代码，视图可以改变，但是vue实例中的数据不会改变
	model:{
		value:'num',//默认值是value
		event:'change'//默认事件是input
	},
	props:['num'],
	template:`<button @click='$emit("change",100)'>{{num}}</button>`
})
const vm = new Vue({
	el:"#app",
	data:{
		num:0
	}
})
</script>
</html>

再来看一下sync修饰符
会自动派发一个update事件

	<!-- <test-sync  :num.sync="num"></test-sync> -->
	<test-sync  @update:num='num=$event' :num='num'></test-sync>

Vue.component('test-sync',{
	props:['num'],
	template:`<button @click="$emit('update:num',300)">{{num}}</button>`
})

happysmartgirl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue中v-model原理和sync修饰符

我们都知道vue中v-model是双向数据绑定，一般用在表单input框中，其实v-model可以用在组件中<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="app">  <
复制链接

扫一扫

专栏目录