<template> <div> //input实时改变wrd的值, 并且会实时改变box里的内容 <input type="text" v-model="wrd"> <box :word.sync="wrd" ></box> </div> </template> <script> import box from './box' //引入box子组件 export default { name: 'HelloWorld', data() { return { wrd: '' } }, components: { box } } </script> <style scoped></style>
box.vue
<template> <div> <div> <input type="text" v-model="str"> </div> //word是父元素传过来的 <h2>{{ word }}</h2> </div> </template> <script> export default { name: 'box', data() { return { str: '', } }, props: { word: '' }, watch: { str: function(newValue, oldValue) { //每当str的值改变则发送事件update:word , 并且把值传过去 this.$emit('update:word', newValue) } } } </script> <style scoped></style>
利用了父级可以在子元素上监听子元素的事件
father.vue
<template> <div> <input type="text" v-model="wrd"> <box @incre="boxIncremend" ></box> </div> </template> <script> import box from './box' export default { name: 'HelloWorld', data() { return { wrd: '' } }, methods: { boxIncremend(e) { this.wrd = this.wrd + e } }, components: { box } } </script> <style scoped></style>
box.vue
<template> <div> <input type="text" v-model="str"> <h2>{{ word }}</h2> </div> </template> <script> export default { name: 'box', data() { return { num: 0 } }, props: { word: '' }, watch: { str: function(neww, old) { //往父级发射incre事件 this.$emit('incre', ++this.num) } }, } </script> <style scoped></style>
总结
以上所述是小编给大家介绍的vue .sync修饰符的使用，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: