Escriba el título del directorio personalizado aquí
Varias formas de pasar valores entre componentes vue
Hablemos hoy sobre el paso de valor entre los componentes de vue3. Aquellos que han estudiado vue2 deben saber que el paso de valor de componente es un escenario funcional indispensable en el proceso de desarrollo de proyectos de vue. Hay muchas formas de pasar valores en vue2, y el paso de valor de vue3 En cuanto al método, lo resumiré un poco aquí, pero no es muy completo, por favor comparta y agregue.
Ver 2
1. Componente principal
<template>
<div>
<children :title="title" @getChildren="getChildren"></children>
<-- 父组件通过 @监听事件名称="触发的方法"来进行监听 -->
<div>子组件说： {
{ childrenAsk }}</div>
</div>
</template>
<script>
import children from "./children.vue"
export default {
data() {
return {
title: "我是父组件传过来的值",
childrenAsk: ""
}
},
methods: {
getChildren(val) {
this.childrenAsk = val
}
}
}
</script>
2. Subcomponentes
<template>
<div>
<div>父组件传过来的值： {
{ title }}</div>
<button @click="askToFather">点击发送给父组件</button>
</div>
</template>
<script>
export default {
props: {
title: {
type: String
}
},
data() {
return {
askMsg: "这是我给父组件说的话"
}
},
methods: {
askToFather() {
this.$emit("getChildren", this.askMsg)
}
}
}
</script>
3. Componentes hermanos
Es para crear un centro de eventos, que es equivalente a una estación de transferencia, que se puede usar para transmitir y recibir eventos
1. Crear una instancia de Vue vacía global: eventBus
import Vue from 'vue';
const eventBus = new Vue();
export default eventBus;
2. Las páginas específicas usan $emit para publicar eventos: pasar valores
import eventBus from '@/eventBus'
eventBus.$emit('send','hello')
3. Las páginas específicas usan $on para suscribirse a eventos: recibir valores de componentes
import eventBus from '@/eventBus'
eventBus.$on('send',mes=>{
console.log(msg) //输出 hello
})
Aviso:
$on escucha primero, y una vez que $emit publica el evento, todos los componentes pueden escuchar el evento con $on. Por lo tanto, al pasar parámetros, debe haber escuchado primero para obtener los parámetros. Por ejemplo, en el componente principal, el evento $emit se coloca en la función de enlace montada y el evento de liberación $emit se activa después de que se crea el componente secundario y $on comienza a escuchar el evento.
4. $off() elimina el detector de eventos
import eventsBus from '@/eventBus
eventBus.$off('send')
ver 3
En comparación con vue2, vue ha sufrido muchos cambios. Los datos receptivos se realizan a través de ref o reactivos.
En vue2, la transferencia de valor de los componentes secundarios a los componentes principales se realiza en la forma de this.$emit, y
la configuración reemplaza beforeCreate y Created setup Llamará al setup en vue3 antes de beforeCreate
para recibir los dos parámetros de props y context.props recibe el valor seleccionado por el componente actual props, es decir, obtiene los parámetros pasados por el componente padre.Después de recibir los parámetros, puede use el contexto en la plantilla para recibir
un objeto The context, que contiene algunas propiedades a las que se debe acceder a través de esto en vue2
La parte central del componente secundario que pasa el valor al componente principal es el evento de emisión. El componente secundario vincula un evento de activación de emisión, y el componente principal escucha el evento para lograr el propósito de que el componente secundario pase el valor al componente principal. .
1. Componente principal
<template>
<div style="color: aqua">父组件</div>
<div>子组件对我说：{
{ children_msg }}</div>
<children :title="msg" @listen="listenToChildren"></children>
{
{ value }}
</template>
<script lang="ts">
import children from "@/views/component_emit/children.vue"
import {
defineComponent, ref } from "vue"
export default defineComponent({
components: {
children,
},
name: "father",
setup() {
let msg = "我是父组件"
let children_msg = ref("") // ref的作用是实现响应式， 如果没有ref则不能实现响应式（引用数据类型用reactive）
let listenToChildren = (val) => {
children_msg.value = val // 使用ref包裹的数据，需要通过.value的形式访问他的值
}
return {
msg,
children_msg,
listenToChildren,
}
},
})
</script>
<style></style>
2. Subcomponentes
<template>
<div style="color: brown">子组件</div>
<!-- 父传子使用方法和vue2相同 -->
<div>父组件传过来的值为：{
{ title }}</div>
<button @click="sayToFather">向父组件说话</button>
</template>
<script lang="ts">
import {
defineComponent } from "vue"
export default defineComponent({
name: "children",
props: {
title: {
type: String,
},
},
setup(props, context) {
// context作用是获取上下文对象，
// 如果setup写法为setup(props, { emit })的方式的话，下面的context可以省略
const sayToFather = () => {
const ask = "我是子组件，我对父组件说话"
context.emit("listen", ask)
}
return {
sayToFather,
}
},
})
</script>
<style></style>
3. Valor del pase hermano
En Vue3, Vue ya no es un constructor, pero Vue.createApp({}) devuelve una función sin on, on,Un objeto con los métodos on , emit y $once.
Como sugiere la documentación oficial de la Guía de migración de Vue 3, podemos usar la biblioteca mitt o tiny-emitter para enviar eventos entre componentes.
1. La instalación depende de yarn add mitt o npm install mitt
2. Uso
Igual que Vue2, empaquetado como myBus.js:
import mitt from 'mitt'
export default mitt()
Alternativamente, también se puede definir como una variable global:
import {
createApp } from 'vue'
import App from './App.vue'
import mitt from 'mitt'
const app = createApp(App)
app.config.globalProperties.emitter = mitt()
Luego encapsule un gancho
// src/hooks/useEmitter.js
import {
getCurrentInstance } from 'vue'
export default function useEmitter() {
const internalInstance = getCurrentInstance()
const emitter = internalInstance.appContext.config.globalProperties.emitter
return emitter
}
Por supuesto, para mayor comodidad de manejo, también puede introducir el guante por separado donde lo necesite.
Ejemplo: Digamos que tenemos una barra lateral y un encabezado que contiene un botón para cerrar/abrir la barra lateral, y necesitamos ese botón para alternar la barra lateral expandida o cerrada.
//header 点击传递值
<template>
<button @click="todoSidebar">todoSidebar</button>
</template>
<script setup>
import {
ref } from 'vue'
import useEmitter from '@/hooks/useEmitter'
const sidebarOpen = ref(true)
const emitter = useEmitter()
const toggleSidebar = () => {
sidebarOpen.value = !sidebarOpen.value
emitter.emit('todo-sidebar', sidebarOpen.value)
}
</script>
// sider 接收值
<template>
<aside class="sidebar" :class="{'sidebar--toggled': !isOpen}">
{
{
isOpen }}
</aside>
</template>
<script setup>
import {
ref, onMounted } from 'vue'
import useEmitter from '@/hooks/useEmitter'
const isOpen = ref(true)
const emitter = useEmitter()
onMounted(() => {
emitter.on('todo-sidebar', (isOpen) => {
isOpen.value = isOpen
})
})
</script>