Passer la valeur du composant parent au composant enfant
1. Liez les propriétés dynamiques lorsque le composant parent appelle le composant enfant et transmettez le listId au composant enfant [:listId="id"]
<template>
<v-card>
<v-tabs-items >
<v-tab-item key="1"> <!-- 组件1-->
<tab1 :listId="id"></tab1>
</v-tab-item>
<v-tab-item key="2"> <!-- 组件2-->
</v-tab-item>
</v-tabs-items>
</v-card>
</template>
<script>
import tab1 from './components/tab1'
import axios from 'axios'
export default {
name: 'Home',
components: {
tab1
},
data () {
return {
id: "",
},
},
methods: {
getId(){
//.....
this.id=res.value;
}
}
}
</script>2. Dans le composant enfant, recevez les données transmises par le composant parent via les accessoires
<template>
<v-card>
{
{listId}} //父组件传过来的值直接展示在页面上
</v-card>
</template>
<script>
export default {
name: 'ListView',
props: {
listId: String //listId是string类型
},
data () {
return {
newlistId: "",
}
},
//监听listId的值，当它由空转变时就会触发，这时候就能取到了，拿到值后要传值到data的newListId中
watch: {
listId: function (newData) {
this.newListId = newData
this.getListId(this.newListId)
}
},
methods: {
getListId (res) {
console.log(this.newListId)
}
}
</script>
type : utilisé pour limiter le type de données du paramètre entrant, qui peut être l'un des constructeurs natifs suivants : chaîne, nombre, booléen, tableau, objet, date, fonction, symbole, tout constructeur personnalisé ou une combinaison du tableau ci-dessus .
default : utilisé pour spécifier une valeur par défaut. Si aucun paramètre n'est passé, les valeurs par défaut sont utilisées. Les valeurs par défaut des objets ou des tableaux doivent être renvoyées à partir d'une fonction d'usine.
obligatoire : définit si le paramètre doit être passé et le type de données de la valeur est booléen
validateur : la fonction de validation personnalisée est utilisée pour ajouter des restrictions personnalisées sur les paramètres entrants. Le type de données de la valeur est Fonction et les paramètres de la fonction sont les valeurs de paramètres entrantes correspondantes.