Índice
fornecer / injetar + Vuex (avançado)
Comunicação entre componentes irmãos
localStorage (cache do navegador)
Publicar modo Assinar (Pub/Sub)
Conecte-se ao servidor WebSocket:
Gerenciamento de estado Vuex (avançado)
Barramento de Eventos (Avançado)
3. Recomendações de alta qualidade no passado
1. Comumente usado
- Recentemente, tenho empacotado vários componentes para melhorar a eficiência de desenvolvimento dos membros da equipe.
- Componentes pai-filho encontrados em várias situações, várias transferências de valor entre componentes irmãos,
- Aqui está um resumo e alguma exploração, bem-vindo para adicionar ~
Adereços
O componente pai passa dados para o componente filho e o componente filho recebe os dados por meio do atributo props
componente pai:
<template>
<div>
<child-component :parentData="data"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
data () {
return {
data: '父组件传递的数据'
}
}
}
</script>
Submontagem:
<template>
<div>
子组件接收到的数据：{
{ parentData }}
</div>
</template>
<script>
export default {
props: {
parentData: String
}
}
</script>
Quais são os tipos de valor padrão das props Vue
$emit e $on
O componente filho transmite dados para o componente pai, o componente filho aciona um evento por meio de $emit e o componente pai escuta o evento e recebe dados por meio de $on.
componente pai:
<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>
Submontagem:
<template>
<div>
<button @click="handleClick">点击触发事件</button>
</div>
</template>
<script>
export default {
methods: {
handleClick () {
this.$emit('childEvent', '子组件传递的数据')
}
}
}
</script>
$pais e $filhos
O componente pai passa dados para o componente filho, e o componente pai obtém a instância do componente filho por meio de $children e chama o método do componente filho para passar os dados.
componente pai:
<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>
Submontagem:
<template>
<div>
子组件
</div>
</template>
<script>
export default {
methods: {
handleData (data) {
console.log('子组件接收到的数据：' + data)
}
}
}
</script>
$attrs e $listeners
O componente pai passa atributos e eventos para o componente filho, e o componente filho obtém o atributo por meio de $attrs e obtém o evento por meio de $listeners e o vincula ao componente filho.
componente pai:
<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>
Submontagem:
<template>
<div>
子组件
</div>
</template>
<script>
export default {
mounted () {
this.$emit('event1', '子组件传递的数据')
}
}
</script>fornecer e injetar
O componente pai passa dados para o componente filho, o componente pai fornece dados por meio de fornecer e o componente filho injeta dados por meio de injeção.
componente pai:
<template>
<div>
<child-component></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
provide () {
return {
parentData: '父组件提供的数据'
}
}
}
</script>
Submontagem:
<template>
<div>
子组件接收到的数据：{
{ childData }}
</div>
</template>
<script>
export default {
inject: ['parentData'],
computed: {
childData () {
return this.parentData + '，子组件加工处理后的数据'
}
}
}
</script>
2. Outras explorações
EventBus
A comunicação entre componentes pais e componentes filhos é realizada através de um barramento de eventos central (EventBus).
EventBus.js:
import Vue from 'vue'
export const EventBus = new Vue()
componente pai:
<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>
Submontagem:
<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
O componente pai e o componente filho se comunicam através do Vuex, compartilhando a mesma árvore de estado.
loja.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
}
}
})
componente pai:
<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>
Submontagem:
<template>
<div>
子组件接收到的数据：{
{ childData }}
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
computed: {
...mapState(['data']),
childData () {
return this.data + '，子组件加工处理后的数据'
}
}
}
</script>$refs propriedade
O componente pai pode obter a instância do componente filho por meio de $refs e acessar as propriedades e métodos do componente filho.
componente pai:
<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>
Submontagem:
<template>
<div>
子组件接收到的数据：{
{ childData }}
</div>
</template>
<script>
export default {
data () {
return {
childData: '子组件原始数据'
}
}
}
</script>$propriedade pai
Os componentes filho podem obter a instância do componente pai por meio de $parent e, em seguida, acessar as propriedades e métodos do componente pai.
componente pai:
<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>
Submontagem:
<template>
<div>
<button @click="handleChild">调用父组件方法</button>
</div>
</template>
<script>
export default {
methods: {
handleChild () {
console.log(this.$parent.parentData)
this.$parent.handleParent()
}
}
}
</script>propriedade $root
Os subcomponentes podem obter a instância do componente raiz por meio de $root e, em seguida, acessar as propriedades e métodos do componente raiz.
componente raiz:
<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>
Submontagem:
<template>
<div>
子组件
</div>
</template>
<script>
export default {
mounted () {
console.log('根组件的数据：' + this.$root.rootData)
this.$root.rootMethod()
}
}
</script>fornecer / injetar (avançado)
provide / inject permite que os componentes ancestrais injetem uma dependência em todos os componentes descendentes, permitindo que esses componentes usem a mesma injeção de dependência.
Componente ancestral:
<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>
Componentes filhos diretos:
<template>
<div>
子组件
</div>
</template>
<script>
export default {
inject: ['sharedObj']
}
</script>
Subcomponentes indiretos:
<template>
<div>
子组件接收到的数据：{
{ childData }}
</div>
</template>
<script>
export default {
inject: ['sharedObj'],
computed: {
childData () {
return this.sharedObj.message + '，子组件加工处理后的数据'
}
}
}
</script>fornecer / injetar + Vuex (avançado)
Use provide/inject para injetar uma instância do Vuex para que todos os componentes usem a mesma instância do Vuex.
loja.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
}
}
})
componente raiz:
<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>
Subcomponentes e netos:
<template>
<div>
组件接收到的数据：{
{ componentData }}
</div>
</template>
<script>
export default {
inject: {
store: {
default: null
}
},
computed: {
componentData () {
return this.store.state.data + '，组件加工处理后的数据'
}
}
}
</script>evento personalizado
Use vm.$on(eventName, callback)ouvintes de eventos, use vm.$emit(eventName, ...args)eventos de gatilho.
componente pai:
<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>
Submontagem:
<template>
<div>
<button @click="handleClick">点击触发事件</button>
</div>
</template>
<script>
export default {
methods: {
handleClick () {
this.$emit('custom-event', '子组件传递的数据')
}
}
}
</script>Comunicação entre componentes irmãos
Use uma instância Vue vazia como um barramento de eventos, envie eventos para o barramento de eventos por um lado e ouça os eventos por outro.
EventBus.js:
import Vue from 'vue'
export const EventBus = new Vue()
Componente A:
<template>
<div>
<button @click="handleClick">向组件B传递数据</button>
</div>
</template>
<script>
import { EventBus } from './EventBus'
export default {
methods: {
handleClick () {
EventBus.$emit('event', '组件A传递的数据')
}
}
}
</script>
Componente 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 do navegador)
Use o cache do navegador para armazenar dados, armazenar e ouvir os dados no cache em componentes que precisam se comunicar.
Componente A:
<template>
<div>
<button @click="handleClick">向组件B传递数据</button>
</div>
</template>
<script>
export default {
methods: {
handleClick () {
localStorage.setItem('data', '组件A传递的数据')
}
}
}
</script>
Componente 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>Publicar modo Assinar (Pub/Sub)
Usando um centro de mensagens, os assinantes inscrevem mensagens no centro de mensagens, os publicadores publicam mensagens no centro de mensagens e o centro de mensagens notifica todos os assinantes da mensagem.
Central de mensagens:
// 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))
}
}
Componente A:
<template>
<div>
<button @click="handleClick">向组件B传递数据</button>
</div>
</template>
<script>
import { PubSub } from './PubSub'
export default {
methods: {
handleClick () {
PubSub.publish('event', '组件A传递的数据')
}
}
}
</script>
Componente 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 (Avançado)
Use o protocolo WebSocket para realizar a comunicação em tempo real, conectar todos os componentes ao mesmo servidor WebSocket e realizar a comunicação enviando mensagens.
Conecte-se ao servidor 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出错')
}
Componente 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>
Componente 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>Parâmetros de Rota (Avançado)
O uso de parâmetros de roteamento para passar dados geralmente é adequado para comunicação entre componentes pai e filho ou entre componentes irmãos.
componente pai:
<template>
<div>
点击以下链接可以传递数据：<br>
<router-link :to="{ name: 'child', params: { data: '父组件传递的数据' } }">传递数据到子组件</router-link>
</div>
</template>
Submontagem:
<template>
<div>
子组件接收到的数据：{
{ $route.params.data }}
</div>
</template>
<script>
export default {
mounted () {
console.log('子组件接收到的数据：' + this.$route.params.data)
}
}
</script>
Componentes irmãos:
<template>
<div>
兄弟组件接收到的数据：{
{ $route.params.data }}
</div>
</template>
<script>
export default {
mounted () {
console.log('兄弟组件接收到的数据：' + this.$route.params.data)
}
}
</script>Gerenciamento de estado Vuex (avançado)
Use o Vuex para gerenciar o estado público e os componentes se comunicam por meio do Vuex.
loja.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
}
}
})
Componente A:
<template>
<div>
<button @click="handleClick">向组件B传递数据</button>
</div>
</template>
<script>
import store from './store'
export default {
methods: {
handleClick () {
store.commit('setData', '组件A传递的数据')
}
}
}
</script>
Componente B:
<template>
<div>
组件B接收到的数据：{
{ data }}
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
computed: {
...mapState(['data'])
},
mounted () {
console.log('组件B接收到的数据：' + this.data)
}
}
</script>Barramento de Eventos (Avançado)
Usando uma instância Vue vazia como o barramento de eventos, o componente A passa os dados para o componente B através do barramento de eventos.
Ônibus do evento:
// EventBus.js
import Vue from 'vue'
export const EventBus = new Vue()
Componente A:
<template>
<div>
<button @click="handleClick">向组件B传递数据</button>
</div>
</template>
<script>
import { EventBus } from './EventBus'
export default {
methods: {
handleClick () {
EventBus.$emit('event', '组件A传递的数据')
}
}
}
</script>
Componente 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. Recomendações de alta qualidade no passado
Por favor, goste se for útil e desenvolva um bom hábito!
Por favor, deixe uma mensagem para perguntas, trocas e encorajamento!