prefacio
Cuando estaba aprendiendo Vue por mi cuenta, me sentí realmente abrumado cuando vi símbolos como $. Leí y entendí aproximadamente el componente de comunicación durante la entrevista, pero no tenía una comprensión profunda de cómo pasa los valores de manera efectiva. Ahora decido estudiarlo detenidamente y escribir aquí para intentar escribir los pensamientos que entiendo y asimilo en el lenguaje más fácil de entender, con la esperanza de ayudar a los necesitados.
1. Pasar valor del componente principal al componente secundario
Componente principal APP.vue
El componente principal puede usar APP.vue directamente y luego escribir el código:
<template>
<div id="app">
<Users :users="user1"/>
</div>
</template>
<script>
import Users from "./components/Users.vue";
export default {
name: "App",
components: {
Users,
},
data() {
return {
user1: ["kobe", "Jordan", "Iverson"],
};
},
};
</script>
Luego explicaré este código en detalle.
El código es muy simple. Primero mire el contenido en <plantilla>. Los usuarios son nuestros subcomponentes. Publicaré el código de los subcomponentes a continuación. Luego vi que usé v-bind (usando abreviatura) para vincular usuarios y asignar sus valor para usuario1 . De hecho, también puedo escribir usuario1 como usuarios, porque se siente más hermoso, pero para distinguir y no confundir a todos, lo cambié a usuario1. Entre ellos, usuarios es nuestro nombre personalizado , puede llamarlo como quiera y este nombre personalizado se usará en los subcomponentes .
Lo que hará el componente principal es pasar la matriz de datos al subcomponente a través de los usuarios vinculados en la etiqueta del subcomponente <Users> a la que se hace referencia en la <template> anterior, y recibirla a través de accesorios en el subcomponente.
Subcomponente Usuarios.vue
<template>
<div class="hello">
<ul>
<li v-for="user in users" :key="user">{
{ user }}</li>
</ul>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props:{
users:{
type:String,
required:true
}
}
};
</script>Código detallado:
En primer lugar, puedes ver que he recorrido la matriz de usuarios en li en <plantilla>, entonces, ¿de dónde vienen estos usuarios? Se obtiene de los accesorios siguientes, y los accesorios aquí se utilizan para aceptar la matriz usuario1 pasada por el componente principal. Los usuarios en props, los usuarios personalizados en el componente principal y los usuarios atravesados en el subcomponente li son todos lo mismo . Espero que todos entiendan esto y quedará claro al escribir el código usted mismo. El más tabú es solo mirar pero no escribir, así que te aseguro que no recordarás nada.
Vale la pena señalar que direct v-for puede informar el siguiente error:
error Los elementos en iteración esperan tener directivas 'v-bind:key' vue/require-v-for-key
Esto es para recordarle que su v-for no ha agregado una clave, solo agregue una clave como el código anterior. En cuanto a por qué este es el caso, vaya a Baidu usted mismo. Solo sé que cada vez que escriba v-for, debe traer la clave. Tengo entendido que se puede garantizar la singularidad de cada elemento atravesado. Si hay un error de comprensión, espero que el jefe pueda corregirme en el área de comentarios, muchas gracias.
El efecto final en la página es:
Permítanme usar otra imagen para resumir el proceso de pasar valores de los componentes principales a los componentes secundarios:
2. El componente secundario pasa el valor al componente principal.
Componente principal APP.vue
<template>
<div id="app">
<Child @wordChanged="updateWord" />
<h2>{
{ parentWords }}</h2>
</div>
</template>
<script>
import Child from "./components/Child.vue";
export default {
name: "App",
components: {
Child,
},
data() {
return {
parentWords: "这个值是父组件中的值",
};
},
methods: {
updateWord(event) {
console.log(event)
this.parentWords = event;
},
},
};
</script>
<style>
</style>
Código detallado:
Primero, se introduce el subcomponente <Child> y se vincula un evento wordChanged al subcomponente , que se asigna como la función updateWord declarada a continuación, y h2 se usa para mostrar parentWords en los datos primero .
Vale la pena señalar que wordChanged aquí debe ser coherente con el primer parámetro del método $emit en el subcomponente .
Echemos un vistazo a la función updateWord nuevamente. Tiene un parámetro. La función aquí es aceptar el valor pasado desde el subcomponente. La primera línea es imprimir el valor pasado en la consola (espere un momento para ver el renderizado). y al mismo tiempo, los datos ParentWords la tarea son el valor pasado en el evento .
Vale la pena señalar el evento de parámetro en updataWord. ¿Qué sucede si lo escribo así?
<template>
<div id="app">
<button @click="updateWord($event)" value="this is a button">click me</button>
<h2>{
{ parentWords }}</h2>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
parentWords: "这个值是父组件中的值",
};
},
methods: {
updateWord(event) {
console.log(event)
console.log(event.target)
console.log(event.target.value)
this.parentWords = event;
},
},
};
</script>
<style>
</style>
Echemos un vistazo al efecto de la página:
Después de hacer clic en el botón de la derecha:
Como puede ver, obtuvimos un evento por turno, luego el cuerpo del botón y finalmente el valor del botón. Puede compararlo con el código.
Entonces aprendimos dos usos de $event;
1. Obtenga el evento u opere el objeto del evento actual (aquí hay un botón) y al mismo tiempo obtenga las propiedades de este objeto (como el valor)
2. Se puede utilizar para pasar valores (como texto)
Bien, la expansión terminó aquí, sigamos mirando los subcomponentes.
Componente secundario Child.vue
<template>
<div>
<button @click="changeWords">click here</button>
</div>
</template>
<script>
export default {
methods: {
changeWords() {
this.$emit("wordChanged", "这个值是子组件向父组件传的值");
},
},
};
</script>
<style type="text/css" scoped>
button {
width: 80px;
height: 80px;
padding: 10px;
background-color: green;
color: aliceblue;
}
</style>
Código detallado:
En primer lugar, en <plantilla>, solo hay un botón, que está vinculado a un evento de clic changeWords , que es un método de emisión . emitir v. lanzar, enviar. El primer parámetro de este método es el nombre personalizado wordChanged en el componente principal , y luego el texto del segundo parámetro se "emite" al wordChanged del componente principal , que es recibido por updateWord para wordChanged en el componente principal . debería ser Se recibe el evento de parámetro de updateWord .
El efecto de la página final:
Antes de hacer clic en el botón:
Después de hacer clic en el botón:
Permítanme usar otra imagen para resumir el proceso de pasar valores de los componentes principales a los componentes secundarios:
actualización. . . . . .