VueJS v-data.table 父子通信

Question

在這里我遇到了一些問題，希望有所幫助：我有兩個 Vuetify“v-data.tables” 1 - 父表 2 - 兒童表“兒童表是一個可重用的組件”

我正在尋找一段可以適應我的程序的通用代碼，所以我希望每次單擊 Parent 表中的 ROW 時，Child 表中的數據顯示與 ID 匹配的詳細信息

我在 .net 上查看了一些示例，但無法使它們適應我的程序。 這是鏈接：在此處輸入鏈接描述

 <template> <div id="app"> <table-component:data="fetchData"> <table-column show="firstName" label="First name"></table-column> </table-component> </div> </template> <script> import axios from 'axios'; export default { methods: { async fetchData({ page, filter, sort }) { const response = await axios.get('/my-endpoint', { page }); // An object that has a `data` and an optional `pagination` property return response; } } } </script>

Answer 1

在這里，我遇到了一些問題，希望有所幫助：我有兩個 Vuetify “v-data-tables” 1 - 父表 2 - 子表“子表是可重用的組件”

我正在尋找一段可以適應我的程序的通用代碼，所以我希望每次單擊 Parent 表中的 ROW 時，Child 表中的數據顯示與 ID 匹配的詳細信息

我在網上看了有例子，但不能適應我的編。 這是鏈接：在此處輸入鏈接描述

 <template> <div id="app"> <table-component:data="fetchData"> <table-column show="firstName" label="First name"></table-column> </table-component> </div> </template> <script> import axios from 'axios'; export default { methods: { async fetchData({ page, filter, sort }) { const response = await axios.get('/my-endpoint', { page }); // An object that has a `data` and an optional `pagination` property return response; } } } </script>

Answer 2

我找到了我的問題的解決方案，然后我想與您分享，首先您必須使用“事件總線”，您會發現很多教程和視頻令人失望。 1 - j'ai créé un fichier JS nommé bus.js avec ce 代碼：

 import Vue from 'vue' export const EventBus = new Vue()

2- dans le composant Parent dans les Methods：

 EventBus.$emit('id', id)

"Id" est l'identificateur de la ROW sélectionner。

3- dans le second composant Enfant qui contenais le détail：

 EventBus.$on('id', id => { console.log(id) this.idSelect = id console.log('Mounted' + this.idSelect) this.loadContenu() })

loadcontenu est la méthode qui charge les données détail de l'API。 idSelect est une variable qui reçois ID envoyer depuis le composant Parent.

Voilà j'ai voulu partager cette petite expérience avec vous qui pourrais aider。

Answer 3

只是一個使用簡單道具的簡短示例：

父組件：

<template>
    <div>
        <div @click="passId('12345')">
        </div>
        <childComponent 
        :theId = theId
        />
    </div>
</template>
<script>
import childComponent from 'path/to/your/childComponent'
export default {

    components:{
        childComponent 
    },
    data(){
        return{
            theId:null
        }
    },
    methods:{
    passId(id){
        this.theId = id    
    }
    }  
}
</script>

子組件：

<template>
    <div>
        <div v-if="theId">
            <!-- do something with theID here -->
        </div>
    </div> 
</template>
<script>
export default {

    props:{
        theId:{
            type: String,
            default:null
        }
    } 
}
</script>