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>