(二十一)父子组件传值,子组件调用父组件事件
2022/4/7 23:22:36
本文主要是介绍(二十一)父子组件传值,子组件调用父组件事件,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
1:调用组件,并且通过自定义属性向子组件传入keywork,keywork1两个值,传Child事件
<input-box v-model:modelkey="keywork" v-model:modelkey1="keywork1" @showChild="Child"> </input-box> 2:子组件通过props获取传过来的值 props:["modelkey","modelkey1"] 3:还可以通过$emit('update:modelkey1',$event.target.value)把值回传给父组件,实现子组件和父组件数据的双向绑定 <input type="text" :value="modelkey1" @input="$emit('update:modelkey1',$event.target.value)" placeholder="输入内容"/> 4:通过this.$emit('showChild','111','3333')"的方式调用父组件传过来的Child事件 <button @click="this.$emit('showChild','111','3333')">弹框</button> 完整代码: 父组件代码: <template> 自定义组件属性数据双向绑定:<br/> <input-box v-model:modelkey="keywork" v-model:modelkey1="keywork1" @showChild="Child"> </input-box> <br/> {{this.keywork}} <br/> {{this.keywork1}} </template> <script> import childbox from './child.vue' export default { name: "AppA7", data() { return { keywork:"女装1", keywork1:"男装", }; }, components: { "input-box":childbox }, methods: { Child(data,data1){ alert(data+" "+data1) } }, }; </script> 子组件代码:<template> <input type="text" :value="modelkey" @input="$emit('update:modelkey',$event.target.value)" placeholder="输入内容"/> <input type="text" :value="modelkey1" @input="$emit('update:modelkey1',$event.target.value)" placeholder="输入内容"/> <br/> <button @click="this.$emit('showChild','111','3333')">弹框</button> </template> <script> export default { name: "AppA7", data() { return { }; }, mounted() {}, props:["modelkey","modelkey1"] }; </script>
这篇关于(二十一)父子组件传值,子组件调用父组件事件的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-19永别了,微服务架构!
- 2024-05-15鸿蒙生态设备数量超8亿台
- 2024-05-13TiDB + ES:转转业财系统亿级数据存储优化实践
- 2024-05-09“2024鸿蒙零基础快速实战-仿抖音App开发(ArkTS版)”实战课程已上线
- 2024-05-09聊聊如何通过arthas-tunnel-server来远程管理所有需要arthas监控的应用
- 2024-05-09log4j2这么配就对了
- 2024-05-09nginx修改Content-Type
- 2024-05-09Redis多数据源,看这篇就够了
- 2024-05-09Google Chrome驱动程序 124.0.6367.62(正式版本)去哪下载?
- 2024-05-09有没有大佬知道这种数据应该怎么抓取呀?