歪歪极限之轮回,3666小游戏,最聪明的狗
.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" style="margin-top: 12px;"> <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" style="margin-top: 12px;"> <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>
区别只能自己慢慢体会,个人感觉 .sync用法灵活,而v-model只能接受prop名为为value的值.
两者都需要手动触发$emit方法.
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持移动技术网。
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
详解element上传组件before-remove钩子问题解决
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
网友评论