vue父子组件数据同步
vue父子组件数据同步,主要就是子组件监听父组件传过来的内容,$emit调用在父组件的子组件标签的updata()事件this.$emit('erzi','6666') //第一个参数是在父组件中的emit事件名,第二个参数是传过去的数据,可有可无,根据自己需求。执行了this.$emit('erzi','6666'),就会调用父组件中子组件标签的@erzi对应的updata()事件,超简....
·
vue父子组件数据同步,主要就是子组件监听父组件传过来的内容,$emit调用在父组件里的子组件标签的自定义事件
this.$emit('erzi','6666') //第一个参数是在父组件中的emit事件名,第二个参数是传过去的数据,可有可无,根据自己需求。
执行了this.$emit('erzi','6666'),就会调用父组件中子组件标签的@erzi对应的updata()事件,超简单反正
子组件
<template> <div> <div>这是子组件内容</div> <button @click='childrenchange'>改变父组件内容</button> 这是父组件传过来的内容 <input type="text" v-model="input2" @keyup='upchange'> </div> </template> <script> export default { name:'demo', props:['num'], data(){ return { input2:'' } }, methods:{ upchange(){ console.log(this.input2); this.$emit('erzi',this.input2) }, childrenchange(){ this.$emit('erzi','666666666666') } }, mounted(){ this.input2 = this.num }, watch:{ num:{ handler(val){ console.log(val); this.input2=this.num } } } } </script> <style scoped> </style>
父组件
<template> <div> <div class="demo"> {{input1}} <div>这是父组件</div> <!--<input ref="in" type="text" v-model="input1" @keyup='down'>--> </div> <div> <button @click='change'>改变父组件num值</button> </div> <br> <br> <br> <demo @erzi='update' :num='input1'></demo> </div> </template> <script> import demo from './demo.vue' export default { name:'index', components:{ demo }, data(){ return { input1:'', } }, methods:{ down(){ console.log(this.input1); }, change(){ this.input1='恭喜你,完成了' }, update(val){ this.input1 = val } } } </script> <style scoped> .demo{ font-size: 20px; } .el-icon-arrow-down{ font-size:14px; /*width: 20px;*/ /*height: 20px;*/ transition: 0.4s; } .zhuan{ transform: rotate(-180deg); } </style>
以上方式可简写:
父组件里改成 `:num.sync` ,去掉@erzi,完毕!
子组件改成props:['num']照旧,$emit事件默认会有`update:num`,所以子组件emit erzi那段改为this.$emit('update:num','父子组件同步的数据值')
有死宅程序员可以加个Q群,交流or摸鱼聊天:522976012
更多推荐
已为社区贡献10条内容
所有评论(0)