1.在父组件中调用子组件,父亲传值给子组件
子组件如下,把要传给给父亲的值放在props中
template> <!--底部导航--> <div class="index-bbar"> <ul class="flex" > <li v-for="(item,index) in liAry" :class="index==licurrent"> <router-link :to="item.linkURl"> <span class="flex alignc flexdc"> <img :src="/UploadFiles/2021-04-02/index==licurrent">父组件的调用的三部曲
首先引入子组件
import Bottom from '@/components/public/Bottom';注入组件在components中注入
components: {Bottom}在父亲中应用
<template> <Bottom v-bind:liAry='lidata' v-bind:licurrent='guidecurrent'></Bottom> </template>到这里就结束了,是不是贼快
2.子组件传值给父组件
父组件在组件上定义了一个自定义事件childFn,事件名为parentFn用于接受子组件传过来的message值。
<!-- 父组件 --> <template> <div class="test"> <test-com @childFn="parentFn"></test-com> <br/> 子组件传来的值 : {{message}} </div> </template> <script> export default { // ... data: { message: '' }, methods: { parentFn(payload) { this.message = payload; } } } </script>子组件是一个buttton按钮,并为其添加了一个click事件,当点击的时候使用$emit()触发事件,把message传给父组件
<!-- 子组件 --> <template> <div class="testCom"> <input type="text" v-model="message" /> <button @click="click">Send</button> </div> </template> <script> export default { // ... data() { return { // 默认 message: '我是来自子组件的消息' } }, methods: { click() { this.$emit('childFn', this.message); } } } </script>在子组件向父亲传值的时候,不可用router-link,不然接受不到父亲定义的函数
以上就是vue中父子组件的参数传递和应用示例的详细内容,更多关于vue中父子组件的参数传递的资料请关注其它相关文章!
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
白云城资源网 Copyright www.dyhadc.com
暂无“vue中父子组件的参数传递和应用示例”评论...
更新日志
2024年05月20日
2024年05月20日
- 张琍敏1978-雪中莲[台湾复刻版][WAV+CUE]
- 叶蕴仪1993-睡美人[日本版][WAV+CUE]
- 夜晚助兴音乐-群星《新时代床头音乐-性能量》2CD[WAV]
- 24K德国HD金碟《历届奥斯卡获奖金曲》3CD[WAV整轨]
- 邰正宵《重燃爱恋 贰 Walk On》[FLAC/分轨][431.72MB]
- 苏文劭《雨停出来走走》[320K/MP3][81.11MB]
- 苏文劭《雨停出来走走》[FLAC/分轨][210.76MB]
- 群星《2024好听新歌04》十倍音质WAV分轨
- 陈宁《弹指之间HQ》头版限量[低速原抓WAV+CUE]
- 陈宁《故人还》HQCDII限量签名版[低速原抓WAV+CUE]
- 苏文劭《春曲(Lessons)》[320K/MP3][39.8MB]
- 苏文劭《春曲(Lessons)》[FLAC/分轨][97.78MB]
- 群星《2006香港高级视听展原音精选 SACD》[ISO][2G]
- 张琍敏1977-枫林小雨[台湾复刻版][WAV+CUE]
- 林一峰2014-COOKINGMUSIC[香港首版][WAV+CUE]