子組件如下，把要傳給給父親的值放在props中

template> <!--底部導(dǎo)航--> <div class='index-bbar'> <ul > <li v-for='(item,index) in liAry' :class='index==licurrent?’active’:’’'> <router-link :to='item.linkURl'><span class='flex alignc flexdc'> <img :src='http://www.cgvv.com.cn/bcjs/index==licurrent?require(’../../’ + item.urlActive):require(’../../’ + item.url)' ><span>{{item.title}}</span></span> </router-link> </li> </ul> </div></template><script>export default { name: ’Bottom’, data () { return { } }, props:[’liAry’,’licurrent’], methods: { }}</script><style scoped>@import '../../assets/public/css/top.css';@import '../../assets/public/css/bottom.css';</style>

父組件的調(diào)用的三部曲

首先引入子組件

import Bottom from ’@/components/public/Bottom’;

注入組件在components中注入

components: {Bottom}

在父親中應(yīng)用

<template><Bottom v-bind:liAry=’lidata’ v-bind:licurrent=’guidecurrent’></Bottom></template>

到這里就結(jié)束了，是不是賊快

父組件在組件上定義了一個(gè)自定義事件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>

子組件是一個(gè)buttton按鈕，并為其添加了一個(gè)click事件，當(dāng)點(diǎn)擊的時(shí)候使用$emit()觸發(fā)事件，把message傳給父組件

<!-- 子組件 --><template> <div class='testCom'> <input type='text' v-model='message' /> <button @click='click'>Send</button></div></template><script>export default { // ... data() { return { // 默認(rèn) message: ’我是來自子組件的消息’ } }, methods: { click() { this.$emit(’childFn’, this.message); } } }</script>

在子組件向父親傳值的時(shí)候，不可用router-link,不然接受不到父親定義的函數(shù)

以上就是vue中父子組件的參數(shù)傳遞和應(yīng)用示例的詳細(xì)內(nèi)容，更多關(guān)于vue中父子組件的參數(shù)傳遞的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！