vue中父子元件的引數傳遞和應用示例
阿新 • • 發佈:2021-01-06
1.在父元件中呼叫子元件,父親傳值給子元件
子元件如下,把要傳給給父親的值放在props中
template> <!--底部導航--> <div class="index-bbar"> <ul class="flex" > <li v-for="(item,index) in liAry" :class="index==licurrent?'active':''"> <router-link :to="item.linkURl"> <span class="flex alignc flexdc"> <img :src="index==licurrent?require('../../' + item.urlActive):require('../../' + item.url)" class="img1" ><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>
父元件的呼叫的三部曲
首先引入子元件
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中父子元件的引數傳遞的資料請關注我們其它相關文章!