Table des matières
fournir / injecter + Vuex (avancé)
Sous-composants et petits-enfants :
Communication entre composants frères
localStorage (cache du navigateur)
Mode Publier S'abonner (Pub/Sub)
Connectez-vous au serveur WebSocket :
Paramètres d'itinéraire (avancé)
3. Recommandations de haute qualité dans le passé
1. Couramment utilisé
- Récemment, j'ai emballé divers composants pour améliorer l'efficacité du développement des membres de l'équipe.
- Rencontrer des composants parent-enfant dans diverses situations, divers transferts de valeur entre composants frères,
- Voici un résumé et quelques explorations, bienvenue pour ajouter ~
Accessoires
Le composant parent transmet les données au composant enfant, et le composant enfant reçoit les données via l'attribut props
composant parent :
<template>
<div>
<child-component :parentData="data"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
data () {
return {
data: '父组件传递的数据'
}
}
}
</script>
Sous-ensemble :
<template>
<div>
子组件接收到的数据：{
{ parentData }}
</div>
</template>
<script>
export default {
props: {
parentData: String
}
}
</script>
Quels sont les types de valeur par défaut des props Vue
$emit et $on
Le composant enfant transmet des données au composant parent, le composant enfant déclenche un événement via $emit et le composant parent écoute l'événement et reçoit des données via $on.
composant parent :
<template>
<div>
<child-component @childEvent="handleChild"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
methods: {
handleChild (data) {
console.log('父组件接收到的数据：' + data)
}
}
}
</script>
Sous-ensemble :
<template>
<div>
<button @click="handleClick">点击触发事件</button>
</div>
</template>
<script>
export default {
methods: {
handleClick () {
this.$emit('childEvent', '子组件传递的数据')
}
}
}
</script>
$parent et $enfants
Le composant parent transmet les données au composant enfant, et le composant parent obtient l'instance du composant enfant via $children et appelle la méthode du composant enfant pour transmettre les données.
composant parent :
<template>
<div>
<button @click="handleClick">向子组件传递数据</button>
<child-component ref="child"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
methods: {
handleClick () {
this.$refs.child.handleData('父组件传递的数据')
}
}
}
</script>
Sous-ensemble :
<template>
<div>
子组件
</div>
</template>
<script>
export default {
methods: {
handleData (data) {
console.log('子组件接收到的数据：' + data)
}
}
}
</script>
$attrs et $listeners
Le composant parent transmet les attributs et les événements au composant enfant, et le composant enfant obtient l'attribut via $attrs, et obtient l'événement via $listeners et le lie au composant enfant.
composant parent :
<template>
<div>
<child-component attr1="属性1" attr2="属性2" @event1="handleEvent"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
methods: {
handleEvent (data) {
console.log('父组件接收到的数据：' + data)
}
}
}
</script>
Sous-ensemble :
<template>
<div>
子组件
</div>
</template>
<script>
export default {
mounted () {
this.$emit('event1', '子组件传递的数据')
}
}
</script>fournir et injecter
Le composant parent transmet des données au composant enfant, le composant parent fournit des données via provide et le composant enfant injecte des données via inject.
composant parent :
<template>
<div>
<child-component></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
provide () {
return {
parentData: '父组件提供的数据'
}
}
}
</script>
Sous-ensemble :
<template>
<div>
子组件接收到的数据：{
{ childData }}
</div>
</template>
<script>
export default {
inject: ['parentData'],
computed: {
childData () {
return this.parentData + '，子组件加工处理后的数据'
}
}
}
</script>
2. Autres explorations
EventBus
La communication entre les composants parents et les composants enfants s'effectue via un bus d'événements central (EventBus).
EventBus.js：
import Vue from 'vue'
export const EventBus = new Vue()
composant parent :
<template>
<div>
<button @click="handleParent">向子组件传递数据</button>
<child-component></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
import { EventBus } from './EventBus'
export default {
components: {
ChildComponent
},
methods: {
handleParent () {
EventBus.$emit('parent-event', '父组件传递的数据')
}
}
}
</script>
Sous-ensemble :
<template>
<div>
子组件接收到的数据：{
{ childData }}
</div>
</template>
<script>
import { EventBus } from './EventBus'
export default {
data () {
return {
childData: ''
}
},
mounted () {
EventBus.$on('parent-event', data => {
this.childData = data
})
}
}
</script>Vuex
Le composant parent et le composant enfant communiquent via Vuex, partageant le même arbre d'état.
magasin.js：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
data: '共享的数据'
},
mutations: {
setData (state, data) {
state.data = data
}
}
})
composant parent :
<template>
<div>
<button @click="handleParent">向子组件传递数据</button>
<child-component></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
import store from './store'
export default {
components: {
ChildComponent
},
methods: {
handleParent () {
store.commit('setData', '父组件传递的数据')
}
}
}
</script>
Sous-ensemble :
<template>
<div>
子组件接收到的数据：{
{ childData }}
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
computed: {
...mapState(['data']),
childData () {
return this.data + '，子组件加工处理后的数据'
}
}
}
</script>Propriété $refs
Le composant parent peut obtenir l'instance du composant enfant via $refs, puis accéder aux propriétés et aux méthodes du composant enfant.
composant parent :
<template>
<div>
<button @click="handleParent">向子组件传递数据</button>
<child-component ref="child"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
methods: {
handleParent () {
this.$refs.child.childData = '父组件修改的数据'
}
}
}
</script>
Sous-ensemble :
<template>
<div>
子组件接收到的数据：{
{ childData }}
</div>
</template>
<script>
export default {
data () {
return {
childData: '子组件原始数据'
}
}
}
</script>$propriété parente
Les composants enfants peuvent obtenir l'instance du composant parent via $parent, puis accéder aux propriétés et aux méthodes du composant parent.
composant parent :
<template>
<div>
<child-component></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
data () {
return {
parentData: '父组件数据'
}
},
methods: {
handleParent () {
console.log('父组件的方法')
}
}
}
</script>
Sous-ensemble :
<template>
<div>
<button @click="handleChild">调用父组件方法</button>
</div>
</template>
<script>
export default {
methods: {
handleChild () {
console.log(this.$parent.parentData)
this.$parent.handleParent()
}
}
}
</script>propriété $root
Les sous-composants peuvent obtenir l'instance du composant racine via $root, puis accéder aux propriétés et aux méthodes du composant racine.
composant racine :
<template>
<div>
<child-component></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
mounted () {
console.log('根组件的数据：' + this.rootData)
this.rootMethod()
},
data () {
return {
rootData: '根组件的数据'
}
},
methods: {
rootMethod () {
console.log('根组件的方法')
}
}
}
</script>
Sous-ensemble :
<template>
<div>
子组件
</div>
</template>
<script>
export default {
mounted () {
console.log('根组件的数据：' + this.$root.rootData)
this.$root.rootMethod()
}
}
</script>fournir / injecter (avancé)
provide/inject permet aux composants ancêtres d'injecter une dépendance à tous les composants descendants, permettant à ces composants d'utiliser la même injection de dépendance.
Composant ancêtre :
<template>
<div>
<child-component></child-component>
<grand-child></grand-child>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
import GrandChild from './GrandChild.vue'
export default {
components: {
ChildComponent,
GrandChild
},
provide: {
sharedObj: {
message: '这是祖先组件注入的对象'
}
}
}
</script>
Composants enfants directs :
<template>
<div>
子组件
</div>
</template>
<script>
export default {
inject: ['sharedObj']
}
</script>
Sous-composants indirects :
<template>
<div>
子组件接收到的数据：{
{ childData }}
</div>
</template>
<script>
export default {
inject: ['sharedObj'],
computed: {
childData () {
return this.sharedObj.message + '，子组件加工处理后的数据'
}
}
}
</script>fournir / injecter + Vuex (avancé)
Utilisez provide/inject pour injecter une instance de Vuex afin que tous les composants utilisent la même instance de Vuex.
magasin.js：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
data: '共享的数据'
},
mutations: {
setData (state, data) {
state.data = data
}
}
})
composant racine :
<template>
<div>
<child-component></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
import store from './store'
export default {
components: {
ChildComponent
},
provide () {
return {
store
}
}
}
</script>
Sous-composants et petits-enfants :
<template>
<div>
组件接收到的数据：{
{ componentData }}
</div>
</template>
<script>
export default {
inject: {
store: {
default: null
}
},
computed: {
componentData () {
return this.store.state.data + '，组件加工处理后的数据'
}
}
}
</script>événement personnalisé
Utilisez vm.$on(eventName, callback)des écouteurs d'événements, utilisez vm.$emit(eventName, ...args)des événements déclencheurs.
composant parent :
<template>
<div>
<child-component @custom-event="handleCustomEvent"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
methods: {
handleCustomEvent (data) {
console.log('父组件接收到的数据：' + data)
}
}
}
</script>
Sous-ensemble :
<template>
<div>
<button @click="handleClick">点击触发事件</button>
</div>
</template>
<script>
export default {
methods: {
handleClick () {
this.$emit('custom-event', '子组件传递的数据')
}
}
}
</script>Communication entre composants frères
Utilisez une instance vide de Vue comme bus d'événements, envoyez des événements au bus d'événements d'une part et écoutez les événements d'autre part.
EventBus.js：
import Vue from 'vue'
export const EventBus = new Vue()
Composant A :
<template>
<div>
<button @click="handleClick">向组件B传递数据</button>
</div>
</template>
<script>
import { EventBus } from './EventBus'
export default {
methods: {
handleClick () {
EventBus.$emit('event', '组件A传递的数据')
}
}
}
</script>
Composant B :
<template>
<div>
组件B接收到的数据：{
{ data }}
</div>
</template>
<script>
import { EventBus } from './EventBus'
export default {
data () {
return {
data: ''
}
},
mounted () {
EventBus.$on('event', data => {
this.data = data
})
}
}
</script>localStorage (cache du navigateur)
Utilisez le cache du navigateur pour stocker des données, stocker et écouter les données du cache dans les composants qui doivent communiquer.
Composant A :
<template>
<div>
<button @click="handleClick">向组件B传递数据</button>
</div>
</template>
<script>
export default {
methods: {
handleClick () {
localStorage.setItem('data', '组件A传递的数据')
}
}
}
</script>
Composant B :
<template>
<div>
组件B接收到的数据：{
{ data }}
</div>
</template>
<script>
export default {
data () {
return {
data: ''
}
},
mounted () {
window.addEventListener('storage', this.handleStorageUpdate)
this.updateData()
},
beforeDestroy () {
window.removeEventListener('storage', this.handleStorageUpdate)
},
methods: {
handleStorageUpdate (event) {
if (event.key === 'data') {
this.updateData()
}
},
updateData () {
this.data = localStorage.getItem('data') || ''
}
}
}
</script>Mode Publier S'abonner (Pub/Sub)
À l'aide d'un centre de messagerie, les abonnés souscrivent des messages au centre de messagerie, les éditeurs publient des messages sur le centre de messagerie et le centre de messagerie informe tous les abonnés du message.
Centre de messagerie:
// PubSub.js
export const PubSub = {
events: {},
subscribe (event, callback) {
if (!this.events[event]) {
this.events[event] = []
}
this.events[event].push(callback)
},
publish (event, data) {
if (!this.events[event]) {
this.events[event] = []
}
this.events[event].forEach(callback => callback(data))
}
}
Composant A :
<template>
<div>
<button @click="handleClick">向组件B传递数据</button>
</div>
</template>
<script>
import { PubSub } from './PubSub'
export default {
methods: {
handleClick () {
PubSub.publish('event', '组件A传递的数据')
}
}
}
</script>
Composant B :
<template>
<div>
组件B接收到的数据：{
{ data }}
</div>
</template>
<script>
import { PubSub } from './PubSub'
export default {
data () {
return {
data: ''
}
},
mounted () {
PubSub.subscribe('event', data => {
this.data = data
})
}
}
</script>WebSocket (avancé)
Utilisez le protocole WebSocket pour réaliser une communication en temps réel, connectez tous les composants au même serveur WebSocket et réalisez la communication en envoyant des messages.
Connectez-vous au serveur WebSocket :
const ws = new WebSocket('ws://localhost:3000')
ws.onopen = function () {
console.log('WebSocket已连接')
}
ws.onclose = function () {
console.log('WebSocket已关闭')
}
ws.onerror = function () {
console.log('WebSocket出错')
}
Composant A :
<template>
<div>
<button @click="handleClick">向组件B传递数据</button>
</div>
</template>
<script>
const ws = new WebSocket('ws://localhost:3000')
export default {
methods: {
handleClick () {
ws.send('组件A传递的数据')
}
}
}
</script>
Composant B :
<template>
<div>
组件B接收到的数据：{
{ data }}
</div>
</template>
<script>
const ws = new WebSocket('ws://localhost:3000')
export default {
data () {
return {
data: ''
}
},
mounted () {
ws.onmessage = event => {
this.data = event.data
}
}
}
</script>Paramètres d'itinéraire (avancé)
L'utilisation de paramètres de routage pour transmettre des données convient généralement à la communication entre les composants parent et enfant ou entre les composants frères.
composant parent :
<template>
<div>
点击以下链接可以传递数据：<br>
<router-link :to="{ name: 'child', params: { data: '父组件传递的数据' } }">传递数据到子组件</router-link>
</div>
</template>
Sous-ensemble :
<template>
<div>
子组件接收到的数据：{
{ $route.params.data }}
</div>
</template>
<script>
export default {
mounted () {
console.log('子组件接收到的数据：' + this.$route.params.data)
}
}
</script>
Composants frères :
<template>
<div>
兄弟组件接收到的数据：{
{ $route.params.data }}
</div>
</template>
<script>
export default {
mounted () {
console.log('兄弟组件接收到的数据：' + this.$route.params.data)
}
}
</script>Gestion d'état Vuex (avancé)
Utilisez Vuex pour gérer l'état public et les composants communiquent via Vuex.
magasin.js：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
data: '共享的数据'
},
mutations: {
setData (state, data) {
state.data = data
}
}
})
Composant A :
<template>
<div>
<button @click="handleClick">向组件B传递数据</button>
</div>
</template>
<script>
import store from './store'
export default {
methods: {
handleClick () {
store.commit('setData', '组件A传递的数据')
}
}
}
</script>
Composant B :
<template>
<div>
组件B接收到的数据：{
{ data }}
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
computed: {
...mapState(['data'])
},
mounted () {
console.log('组件B接收到的数据：' + this.data)
}
}
</script>Bus d'événement (avancé)
En utilisant une instance vide de Vue comme bus d'événements, le composant A transmet les données au composant B via le bus d'événements.
Bus événementiel :
// EventBus.js
import Vue from 'vue'
export const EventBus = new Vue()
Composant A :
<template>
<div>
<button @click="handleClick">向组件B传递数据</button>
</div>
</template>
<script>
import { EventBus } from './EventBus'
export default {
methods: {
handleClick () {
EventBus.$emit('event', '组件A传递的数据')
}
}
}
</script>
Composant B :
<template>
<div>
组件B接收到的数据：{
{ data }}
</div>
</template>
<script>
import { EventBus } from './EventBus'
export default {
data () {
return {
data: ''
}
},
mounted () {
EventBus.$on('event', data => {
this.data = data
})
}
}
</script>3. Recommandations de haute qualité dans le passé
S'il vous plaît, aimez-le s'il est utile et développez une bonne habitude!
N'hésitez pas à laisser un message pour vos questions, échanges et encouragements !