Vuesync修饰符与v-model的区别是什么，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。.sync修饰组件<!DOCTYPE&nb
Vuesync修饰符与v-model的区别是什么，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。
.sync修饰组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue-03</title>
<!-- 引入Vue -->
<link href="https://cdn.bootCSS.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="stylesheet">
<script src="Https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
</head>
<body>
<div class="container" >
<div id="demo" class="row">
{{ say }}
<br />
<my-input :value.sync="say"></my-input>
</div>
</div>
<script>
new Vue({
el: '#demo',
data: {
say: "123"
},
components: {
"my-input": {
props: ['value'],
template: "<div><input v-bind:value='value' v-on:input='change1' />{{value}}</div>",
watch: {
value: function(newValue, oldValue) {
alert('子组件value新旧值' + newValue + '/' + oldValue);
//this.$emit('update:value', newValue)
}
},
methods: {
change1: function(e) {
var v = e.target.value
this.$emit('update:value', v)
},
}
}
},
watch: {
say: function(n, o) {
alert('父组件新旧值' + n + '-' + o)
}
},
methods: {
}
})
</script>
</body>v-model修饰组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue-10</title>
<!-- 引入Vue -->
<link href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="stylesheet">
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
</head>
<body>
<div class="container" >
<div id="demo" class="row">
{{ say }}
<br />
<my-input v-model="say"></my-input>
</div>
</div>
<script>
new Vue({
el: '#demo',
data: {
say: "123"
},
components: {
"my-input": {
props: ['value'],
template: "<div><input v-bind:value='value' v-on:input='change' />{{value}}</div>",
watch: {
value: function(newValue, oldValue) {
alert('子组件value新旧值' + newValue + '/' + oldValue);
//this.$emit('update:value', newValue)
}
},
methods: {
change: function(e) {
this.$emit('input', e.target.value)
}
}
}
}
})
</script>
</body>看完上述内容，你们掌握VUEsync修饰符与v-model的区别是什么的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注编程网VUE频道，感谢各位的阅读！
--结束END--
本文标题: VUEsync修饰符与v-model的区别是什么
本文链接: https://www.lsjlt.com/news/74713.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0