(二十一)父子组件传值,子组件调用父组件事件
作者:互联网
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>
标签:modelkey1,props,二十一,keywork,Child,组件,data,传值 来源: https://www.cnblogs.com/yingxianqi/p/16114345.html