Pasando de padre a hijo: usando accesorios
//子组件内容
<template>
<div id="app">
<div>姓名：{
{ nombre }}</div>
<div>年龄：{
{ edad }}</div>
</div>
</ plantilla>
<script>
exportar valor predeterminado { props: ["nombre", "edad"], }; </script>
componente principal
<template>
<son1 :name="newname" :age="newage" @son1data="getdata"></son1>
</template>
<script>
export default { data(){ return { newname:'李雷' ， newage:15 } } } </script>
El principio es vincular dos propiedades en el componente principal a través de la configuración de accesorios y usarlas como propiedades del componente secundario.
//
Datos del subcomponente(){ retorno { minombre:este.nombre } }
Pasar de hijo a padre: usar $emit
este.minombre, edad: este.miedad }); }, }, };
</script>
//Componente principal
//Plantilla
<son1 :name="newname" :age="newage" @son1data="getdata"></son1>
//
Métodos: { getdata(val) { this.son1_name = val.name; this.son1_age = val.age; } }, // Datos de atributo() { return { newname: "Zhang San", newage: 22, son1_name: "", son1_age: "", }; },
El principio de este método es pasar el valor del segundo parámetro a través de $emit del componente secundario y luego monitorear el evento $on del componente principal para obtener datos relevantes.
Otro método disponible son los atributos $children, $parent en vc, haga clic en ellos.
Nieto ancestral (capa intermedia desconectada): use proporcionar ==> inyectar
// La opción de proporcionar puede definir datos para otros componentes descendientes usando
provide() { return { dirección: this.address, }; }, data() { return { dirección: "Nanjing Yuhuatai", }; },
Lo anterior es el contenido exportado del componente ancestro y lo siguiente es el contenido del componente nieto.
<plantilla>
<div>
<p>Dirección: {
{ mi dirección }}</p>
</div>
</template>
<script>
export default { data() { return { mi dirección: this.address, }; }, //Obtener los datos del componente principal mediante inyección : ["dirección"], }; </script>
Transferencia de valor entre componentes hermanos:
Bus de eventos: puede crear una instancia de Vue como centro de eventos para la comunicación entre componentes hermanos. En un componente hermano, active el evento personalizado a través de $emit, luego escuche el evento en el bus de eventos y reciba el valor pasado a través de $on en otro componente hermano.
// archivo main.js
importa Vue desde 'vue'
importa aplicación desde './App.vue'
Vue.config.productionTip = falso
new Vue({ render: h => h(App), beforeCreate() { // Necesita agregar una propiedad globalmente Vue.prototype.$bus = this } }).$mount('#app')
// Archivo Father.vue
<template>
<div id="father">
<button @click="btn">Quiero pasar datos al componente Brother</button>
</div>
</template>
<script>
export default { nombre: "Padre", métodos: { btn() { this.$bus.$emit("cambio", 66666); }, }, }; </script>
// Brother.vue 文件
<plantilla>
<div id="brother"></div>
</template>
<script>
export default { nombre: "Hermano", montado() { this.$bus.$on("cambiar", (msg) => { console.log(msg); }); }, }; </script>
Pasar valores entre componentes:
Pasado de padre a hijo: accesorios,
De hijo a padre: $emitir,
Nieto ancestral: proporcionar ==> inyectar,
Sun Chuanzu: $parent, o pasa un método (función) en provide, pásalo directamente.
Comunicación entre hermanos: bus de eventos