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的区别是什么的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注亿速云行业资讯频道，感谢各位的阅读！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
