(二十一)父子组件传值,子组件调用父组件事件

本文主要是介绍(二十一)父子组件传值,子组件调用父组件事件，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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>

这篇关于(二十一)父子组件传值,子组件调用父组件事件的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！