communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > Voir.js > Comment communiquer entre les composants ? Inventaire des méthodes de communication des composants Vue (à collectionner)

Comment communiquer entre les composants ? Inventaire des méthodes de communication des composants Vue (à collectionner)

青灯夜游
Libérer： 2022-08-19 20:04:02
avant
1445 Les gens l'ont consulté

VueComment communiquer entre composants ? Cet article fait le point sur les 10 méthodes de communication des composants de Vue2 et Vue3. J'espère qu'il sera utile à tout le monde !

Comment communiquer entre les composants ? Inventaire des méthodes de communication des composants Vue (à collectionner)

Il existe de nombreuses méthodes de communication entre composants dans Vue, et il existe de nombreuses différences dans l'implémentation de Vue2 et Vue3. Cet article présentera de manière exhaustive les méthodes de communication entre composants de Vue2 et Vue3 à travers 选项式API 组合式API以及setuptrois méthodes d'implémentation différentes. Les méthodes de communication à mettre en œuvre sont présentées dans le tableau ci-dessous. (Partage vidéo d'apprentissage : tutoriel vidéo Vue)

méthode Vue2 Vue3
Père à fils props props
De fils à père $emit émet
Père à fils $attrs attrs
Fils à père $auditeurs Aucun (fusionné dans la méthode attrs)
Père à son fils pourvoir pourvoir
fils à parent inject inject
le composant enfant accède au composant parent $parent aucun
le composant parent accède au composant enfant $children aucun
Parent composant Accéder aux composants enfants $ref expose&ref
Brotherly transmis value EventBus mitt

props

les props sont l'une des méthodes de communication les plus couramment utilisées dans la communication entre composants. Le composant parent est transmis via v-bind et le composant enfant est reçu via les accessoires. Voici ses trois méthodes d'implémentation

  • API facultative
//父组件

<template>
  <div>
    <Child :msg="parentMsg" />
  </div>
</template>
<script>
import Child from './Child'
export default {
  components:{
    Child
  },
  data() {
    return {
      parentMsg: '父组件信息'
    }
  }
}
</script>


//子组件

<template>
  <div>
    {{msg}}
  </div>
</template>
<script>
export default {
  props:['msg']
}
</script>
Copier après la connexion
  • API combinée
//父组件

<template>
  <div>
    <Child :msg="parentMsg" />
  </div>
</template>
<script>
import { ref,defineComponent } from 'vue'
import Child from './Child.vue'
export default defineComponent({
  components:{
    Child
  },
  setup() {
    const parentMsg = ref('父组件信息')
    return {
      parentMsg
    };
  },
});
</script>

//子组件

<template>
    <div>
        {{ parentMsg }}
    </div>
</template>
<script>
import { defineComponent,toRef } from "vue";
export default defineComponent({
    props: ["msg"],// 如果这行不写，下面就接收不到
    setup(props) {
        console.log(props.msg) //父组件信息
        let parentMsg = toRef(props, 'msg')
        return {
            parentMsg
        };
    },
});
</script>
Copier après la connexion
  • paramètre de syntaxe sugar
//父组件

<template>
  <div>
    <Child :msg="parentMsg" />
  </div>
</template>
<script setup>
import { ref } from 'vue'
import Child from './Child.vue'
const parentMsg = ref('父组件信息')
</script>

//子组件

<template>
    <div>
        {{ parentMsg }}
    </div>
</template>
<script setup>
import { toRef, defineProps } from "vue";
const props = defineProps(["msg"]);
console.log(props.msg) //父组件信息
let parentMsg = toRef(props, 'msg')
</script>
Copier après la connexion
.

Remarque

Le flux de données dans les accessoires est un élément unique, c'est-à-dire que le composant enfant ne peut pas modifier la valeur transmise par le composant parent

Dans l'API combinée, si vous souhaitez utiliser d'autres variables dans le composant enfant pour recevoir la valeur des accessoires, vous devez utiliser toRef pour modifier les accessoires. Convertissez les propriétés en réactif.

emit

Le composant enfant peut publier un événement et transmettre certains paramètres via émettre, et le composant parent surveille cet événement via v-on

  • API facultative
//父组件

<template>
  <div>
    <Child @sendMsg="getFromChild" />
  </div>
</template>
<script>
import Child from './Child'
export default {
  components:{
    Child
  },
  methods: {
    getFromChild(val) {
      console.log(val) //我是子组件数据
    }
  }
}
</script>

// 子组件

<template>
  <div>
    <button @click="sendFun">send</button>
  </div>
</template>
<script>
export default {
  methods:{
    sendFun(){
      this.$emit('sendMsg','我是子组件数据')
    }
  }
}
</script>
Copier après la connexion
  • API combinée
//父组件

<template>
  <div>
    <Child @sendMsg="getFromChild" />
  </div>
</template>
<script>
import Child from './Child'
import { defineComponent } from "vue";
export default defineComponent({
  components: {
    Child
  },
  setup() {
    const getFromChild = (val) => {
      console.log(val) //我是子组件数据
    }
    return {
      getFromChild
    };
  },
});
</script>

//子组件

<template>
    <div>
        <button @click="sendFun">send</button>
    </div>
</template>

<script>
import { defineComponent } from "vue";
export default defineComponent({
    emits: ['sendMsg'],
    setup(props, ctx) {
        const sendFun = () => {
            ctx.emit('sendMsg', '我是子组件数据')
        }
        return {
            sendFun
        };
    },
});
</script>
Copier après la connexion
  • configuration sucre de syntaxe
//父组件

<template>
  <div>
    <Child @sendMsg="getFromChild" />
  </div>
</template>
<script setup>
import Child from './Child'
const getFromChild = (val) => {
      console.log(val) //我是子组件数据
    }
</script>

//子组件

<template>
    <div>
        <button @click="sendFun">send</button>
    </div>
</template>
<script setup>
import { defineEmits } from "vue";
const emits = defineEmits(['sendMsg'])
const sendFun = () => {
    emits('sendMsg', '我是子组件数据')
}
</script>
Copier après la connexion

attrs et auditeurs

Le composant enfant utilise $attrs pour obtenir tous les attributs du composant parent à l'exception des attributs passés par les accessoires et des attributs de liaison d'attribut (classe et style).

Le sous-composant utilise $listeners pour obtenir tous les écouteurs d'événements v-on du composant parent (à l'exclusion des modificateurs .native), qui n'est plus utilisé dans Vue3 mais les attrs dans Vue3 peuvent non seulement obtenir les attributs transmis ; le composant parent Vous pouvez également obtenir l'écouteur d'événement v-on du composant parent

  • API facultative
//父组件

<template>
  <div>
    <Child @parentFun="parentFun" :msg1="msg1" :msg2="msg2"  />
  </div>
</template>
<script>
import Child from './Child'
export default {
  components:{
    Child
  },
  data(){
    return {
      msg1:'子组件msg1',
      msg2:'子组件msg2'
    }
  },
  methods: {
    parentFun(val) {
      console.log(`父组件方法被调用,获得子组件传值：${val}`)
    }
  }
}
</script>

//子组件

<template>
  <div>
    <button @click="getParentFun">调用父组件方法</button>
  </div>
</template>
<script>
export default {
  methods:{
    getParentFun(){
      this.$listeners.parentFun('我是子组件数据')
    }
  },
  created(){
    //获取父组件中所有绑定属性
    console.log(this.$attrs)  //{"msg1": "子组件msg1","msg2": "子组件msg2"}
    //获取父组件中所有绑定方法    
    console.log(this.$listeners) //{parentFun:f}
  }
}
</script>
Copier après la connexion
  • API combinée
//父组件

<template>
  <div>
    <Child @parentFun="parentFun" :msg1="msg1" :msg2="msg2" />
  </div>
</template>
<script>
import Child from './Child'
import { defineComponent,ref } from "vue";
export default defineComponent({
  components: {
    Child
  },
  setup() {
    const msg1 = ref('子组件msg1')
    const msg2 = ref('子组件msg2')
    const parentFun = (val) => {
      console.log(`父组件方法被调用,获得子组件传值：${val}`)
    }
    return {
      parentFun,
      msg1,
      msg2
    };
  },
});
</script>

//子组件

<template>
    <div>
        <button @click="getParentFun">调用父组件方法</button>
    </div>
</template>
<script>
import { defineComponent } from "vue";
export default defineComponent({
    emits: ['sendMsg'],
    setup(props, ctx) {
        //获取父组件方法和事件
        console.log(ctx.attrs) //Proxy {"msg1": "子组件msg1","msg2": "子组件msg2"}
        const getParentFun = () => {
            //调用父组件方法
            ctx.attrs.onParentFun('我是子组件数据')
        }
        return {
            getParentFun
        };
    },
});
</script>
Copier après la connexion
  • setup syntax sugar
//父组件

<template>
  <div>
    <Child @parentFun="parentFun" :msg1="msg1" :msg2="msg2" />
  </div>
</template>
<script setup>
import Child from './Child'
import { ref } from "vue";
const msg1 = ref('子组件msg1')
const msg2 = ref('子组件msg2')
const parentFun = (val) => {
  console.log(`父组件方法被调用,获得子组件传值：${val}`)
}
</script>

//子组件

<template>
    <div>
        <button @click="getParentFun">调用父组件方法</button>
    </div>
</template>
<script setup>
import { useAttrs } from "vue";

const attrs = useAttrs()
//获取父组件方法和事件
console.log(attrs) //Proxy {"msg1": "子组件msg1","msg2": "子组件msg2"}
const getParentFun = () => {
    //调用父组件方法
    attrs.onParentFun('我是子组件数据')
}
</script>
Copier après la connexion

Remarque

Utilisez attrs pour appeler le parent méthode de composant dans Vue3 Lorsque, vous devez ajouter avant la méthode ; par exemple, parentFun->onParentFun

provide/inject

provide : est un objet ou une fonction qui renvoie un objet. Il contient les attributs à donner aux générations futures

inject : un tableau de chaînes, ou un objet. Obtenez la valeur fournie par le composant parent ou le composant de niveau supérieur, qui peut être obtenue dans n'importe quel composant descendant via inject

  • API facultative
//父组件
<script>
import Child from './Child'
export default {
  components: {
    Child
  },
  data() {
    return {
      msg1: '子组件msg1',
      msg2: '子组件msg2'
    }
  },
  provide() {
    return {
      msg1: this.msg1,
      msg2: this.msg2
    }
  }
}
</script>

//子组件

<script>
export default {
  inject:['msg1','msg2'],
  created(){
    //获取高层级提供的属性
    console.log(this.msg1) //子组件msg1
    console.log(this.msg2) //子组件msg2
  }
}
</script>
Copier après la connexion
  • API combinée
//父组件

<script>
import Child from './Child'
import { ref, defineComponent,provide } from "vue";
export default defineComponent({
  components:{
    Child
  },
  setup() {
    const msg1 = ref('子组件msg1')
    const msg2 = ref('子组件msg2')
    provide("msg1", msg1)
    provide("msg2", msg2)
    return {
      
    }
  },
});
</script>

//子组件

<template>
    <div>
        <button @click="getParentFun">调用父组件方法</button>
    </div>
</template>
<script>
import { inject, defineComponent } from "vue";
export default defineComponent({
    setup() {
        console.log(inject('msg1').value) //子组件msg1
        console.log(inject('msg2').value) //子组件msg2
    },
});
</script>
Copier après la connexion
  • setup syntax sugar
//父组件
<script setup>
import Child from './Child'
import { ref,provide } from "vue";
const msg1 = ref('子组件msg1')
const msg2 = ref('子组件msg2')
provide("msg1",msg1)
provide("msg2",msg2)
</script>

//子组件

<script setup>
import { inject } from "vue";
console.log(inject('msg1').value) //子组件msg1
console.log(inject('msg2').value) //子组件msg2
</script>
Copier après la connexion

Remarque :

provide/inject convient généralement à une utilisation dans l'imbrication profonde de composants. Généralement utilisé dans le développement de composants.

parent/children

$parent : Le composant enfant obtient l'instance Vue du composant parent, et peut obtenir les méthodes d'attribut du composant parent, etc.

$children : Le composant parent obtient l'instance Vue de le composant enfant, qui est un tableau et une collection d'enfants directs, mais l'ordre des composants enfants n'est pas garanti

  • Vue2
import Child from './Child'
export default {
  components: {
    Child
  },
  created(){
    console.log(this.$children) //[Child实例]
    console.log(this.$parent)//父组件实例
  }
}
Copier après la connexion

RemarqueLe $children obtenu par le parent. le composant n'est pas réactif$children并不是响应式的

expose&ref

$refs可以直接获取元素属性，同时也可以直接获取子组件实例

  • 选项式API
//父组件

<template>
  <div>
    <Child ref="child" />
  </div>
</template>
<script>
import Child from './Child'
export default {
  components: {
    Child
  },
  mounted(){
    //获取子组件属性
    console.log(this.$refs.child.msg) //子组件元素

    //调用子组件方法
    this.$refs.child.childFun('父组件信息')
  }
}
</script>

//子组件 

<template>
  <div>
    <div></div>
  </div>
</template>
<script>
export default {
  data(){
    return {
      msg:'子组件元素'
    }
  },
  methods:{
    childFun(val){
      console.log(`子组件方法被调用,值${val}`)
    }
  }
}
</script>
Copier après la connexion
  • 组合式API
//父组件

<template>
  <div>
    <Child ref="child" />
  </div>
</template>
<script>
import Child from './Child'
import { ref, defineComponent, onMounted } from "vue";
export default defineComponent({
  components: {
    Child
  },

  setup() {
    const child = ref() //注意命名需要和template中ref对应
    onMounted(() => {
      //获取子组件属性
      console.log(child.value.msg) //子组件元素

      //调用子组件方法
      child.value.childFun('父组件信息')
    })
    return {
      child //必须return出去 否则获取不到实例
    }
  },
});
</script>

//子组件

<template>
    <div>
    </div>
</template>
<script>
import { defineComponent, ref } from "vue";
export default defineComponent({
    setup() {
        const msg = ref('子组件元素')
        const childFun = (val) => {
            console.log(`子组件方法被调用,值${val}`)
        }
        return {
            msg,
            childFun
        }
    },
});
</script>
Copier après la connexion
  • setup语法糖
//父组件

<template>
  <div>
    <Child ref="child" />
  </div>
</template>
<script setup>
import Child from './Child'
import { ref, onMounted } from "vue";
const child = ref() //注意命名需要和template中ref对应
onMounted(() => {
  //获取子组件属性
  console.log(child.value.msg) //子组件元素

  //调用子组件方法
  child.value.childFun('父组件信息')
})
</script>

//子组件

<template>
    <div>
    </div>
</template>
<script setup>
import { ref,defineExpose } from "vue";
const msg = ref('子组件元素')
const childFun = (val) => {
    console.log(`子组件方法被调用,值${val}`)
}
//必须暴露出去父组件才会获取到
defineExpose({
    childFun,
    msg
})
</script>
Copier après la connexion

注意

通过ref获取子组件实例必须在页面挂载完成后才能获取。

在使用setup语法糖时候，子组件必须元素或方法暴露出去父组件才能获取到

EventBus/mitt

兄弟组件通信可以通过一个事件中心EventBus实现，既新建一个Vue实例来进行事件的监听，触发和销毁。

在Vue3中没有了EventBus兄弟组件通信，但是现在有了一个替代的方案mitt.js，原理还是 EventBus

  • 选项式API
//组件1
<template>
  <div>
    <button @click="sendMsg">传值</button>
  </div>
</template>
<script>
import Bus from './bus.js'
export default {
  data(){
    return {
      msg:'子组件元素'
    }
  },
  methods:{
    sendMsg(){
      Bus.$emit('sendMsg','兄弟的值')
    }
  }
}
</script>

//组件2

<template>
  <div>
    组件2
  </div>
</template>
<script>
import Bus from './bus.js'
export default {
  created(){
   Bus.$on('sendMsg',(val)=>{
    console.log(val);//兄弟的值
   })
  }
}
</script>

//bus.js

import Vue from "vue"
export default new Vue()
Copier après la connexion
  • 组合式API

首先安装mitt

npm i mitt -S
Copier après la connexion

然后像Vue2中bus.js一样新建mitt.js

expose&ref

    $refs peut obtenir directement les attributs des éléments, et peut également obtenir directement les instances de sous-composants
API facultative

import mitt from 'mitt'
const Mitt = mitt()
export default Mitt
Copier après la connexion

Combiné API

//组件1
<template>
     <button @click="sendMsg">传值</button>
</template>
<script>
import { defineComponent } from "vue";
import Mitt from './mitt.js'
export default defineComponent({
    setup() {
        const sendMsg = () => {
            Mitt.emit('sendMsg','兄弟的值')
        }
        return {
           sendMsg
        }
    },
});
</script>

//组件2
<template>
  <div>
    组件2
  </div>
</template>
<script>
import { defineComponent, onUnmounted } from "vue";
import Mitt from './mitt.js'
export default defineComponent({
  setup() {
    const getMsg = (val) => {
      console.log(val);//兄弟的值
    }
    Mitt.on('sendMsg', getMsg)
    onUnmounted(() => {
      //组件销毁 移除监听
      Mitt.off('sendMsg', getMsg)
    })

  },
});
</script>
Copier après la connexion

setup syntax sugar

//组件1

<template>
    <button @click="sendMsg">传值</button>
</template>
<script setup>
import Mitt from './mitt.js'
const sendMsg = () => {
    Mitt.emit('sendMsg', '兄弟的值')
}
</script>

//组件2

<template>
  <div>
    组件2
  </div>
</template>
<script setup>
import { onUnmounted } from "vue";
import Mitt from './mitt.js'
const getMsg = (val) => {
  console.log(val);//兄弟的值
}
Mitt.on('sendMsg', getMsg)
onUnmounted(() => {
  //组件销毁 移除监听
  Mitt.off('sendMsg', getMsg)
})
</script>
Copier après la connexion
Notez que

🎜l'obtention de l'instance du sous-composant via ref doit être obtenue après le montage de la page. 🎜🎜Lors de l'utilisation du sucre de syntaxe de configuration, le composant enfant doit exposer des éléments ou des méthodes au composant parent afin de l'obtenir🎜

🎜EventBus/mitt🎜🎜🎜Les composants sœurs peuvent communiquer via une implémentation EventBus du centre d'événements crée une nouvelle instance Vue pour surveiller, déclencher et détruire les événements. 🎜🎜Il n'y a pas de communication entre les composants frères et sœurs EventBus dans Vue3, mais il existe maintenant une solution alternative mitt.js, le principe est toujours EventBus🎜🎜🎜API optionnelle🎜🎜rrreee🎜🎜API combinée🎜🎜 🎜 Installez d'abord mitt🎜rrreee🎜 Créez ensuite un nouveau fichier mitt.js comme bus.js dans Vue2🎜🎜mitt.js🎜rrreeerrreee🎜🎜setup syntax sugar🎜🎜rrreee🎜 🎜Écrit à la fin🎜🎜🎜En fait, les composants peuvent également communiquer avec les outils de gestion d'état Vuex ou Pinia (mais cela n'est généralement pas recommandé pour la communication entre composants, car cela entraînera le problème que les composants ne peuvent pas être réutilisés). Pour l'utilisation de Vuex et Pinia, vous pouvez vous référer à cet article🎜Un article analysant Pinia et Vuex🎜🎜🎜 (Partage de vidéos d'apprentissage : 🎜développement web front-end🎜, 🎜Vidéo de programmation de base🎜)🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées：
vue vue3 组件通信
source：juejin.cn
Article précédent：Parlons de la façon d'encapsuler axios dans vite+vue3.0+ts ? Article suivant：Explication détaillée de la différence entre réactif et ref dans vue3 (analyse du code source)
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Où dois-je placer la directive CustomLog dans Apache J'utilise php:7.2-apachedocker. Je dois désactiver le journal d'accès à la connexion à l'U...
Depuis 2024-04-06 22:03:59
0
1
990
Comment déclencher le rendu (avec filtre et pagination) sur la méthode de tri dans React ? Voici mon composant de style Sort.js : <SortWrapper><SortText>SortBy</SortT...
Depuis 2024-04-06 21:28:37
0
1
2257
Comment utiliser les composants Laravel avec des espaces réservés paresseux Livewire Je souhaite ajouter le squelette de mon composant Laravel dans un espace réservé livewire3...
Depuis 2024-04-06 20:02:10
0
2
543
Quelles sont les meilleures pratiques pour afficher les informations de version dans les applications Web ? Je développe une application Web. Quelles sont les meilleures pratiques pour afficher les ...
Depuis 2024-04-06 19:13:16
0
2
476
Laravel 8 - Comment rediriger la route /{editable_text} vers la route /{user} J'ai essayé de créer un itinéraire de redirection pour me conduire à un profil utilisateur...
Depuis 2024-04-06 17:26:11
0
1
410
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal