Tabla de contenido
Primero, el padre transmite datos al hijo.
1. Transmisión de datos específicos fijos
3. El componente hijo llama al componente padre
En segundo lugar, el niño transmite datos al padre.
3. El mismo nivel de precio y transferencia de datos entre cualquier componente
prefacio
En el frente, ya hemos entendido los componentes de vue y la relación jerárquica entre los componentes de vue. Esto está en el blog anterior del blogger, si está interesado, puede avanzar. La dirección es:
Este artículo principalmente escribe y registra el modo y el método de comunicación entre los componentes.Nuestros componentes solo pueden llamar a sus propias propiedades y métodos, y no pueden llamar a las propiedades y métodos de otros componentes, pero si son llamados, entonces es para usar la comunicación de datos. , para poder llamar a las propiedades y métodos del componente.
Las características más destacadas de nuestros componentes vue son el flujo de datos entre componentes, la comunicación de eventos personalizados y la integración de herramientas de compilación.
Primero, el padre transmite datos al hijo.
1. Transmisión de datos específicos fijos
Entendemos a través de un ejemplo de código que el componente principal pasa datos específicos al componente secundario.
Ejemplo de código:
<!DOCTYPE html>
<html lang="en">
<head>
<title>层级关系</title>
</head>
<body>
<div id="app">
<child msg="**大学"></child>
</div>
<script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
Vue.component('child',{
props:['msg'],
template:
`<h1>{
{msg}}学生教务系统</h1>`
});
var vm = new Vue({
el:"#app",
})
</script>
</body>
</html>resultado de la operación:
Podemos ver una interfaz como esta. Cuando se define un mensaje de propiedad en el componente secundario a través de props: ['msg'], el componente raíz llamará al componente secundario, pasará la '**Universidad' en el mensaje de propiedad y pasará estos datos Déselo al componente secundario, para que este componente se pueda mostrar, porque este valor es un valor fijo y específico y no se puede cambiar, por lo que este método también se denomina transferencia de valor literal.
2. Gramática dinámica
La sintaxis dinámica es realmente muy simple. Es similar a usar v-bind para vincular características html a una expresión. Puede usar v-bind para vincular accesorios dinámicos a los datos del componente principal. Cuando los datos del componente principal cambian, estos cambios se envían al componente secundario. Esto no es difícil de entender, echemos un vistazo a un código:
Ejemplo de código:
<!DOCTYPE html>
<html lang="en">
<head>
<title>组件之间的传递</title>
</head>
<body>
<div id="app">
<child v-bind:msg='stage':open='open'></child>
</div>
<script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
Vue.component('child',{
template:
`
<div><h1>{
{msg}}学生教务系统</h1>
<h2 v-show='open'>放假了！进不了！！！</h2></div>`,
props:['msg','open'],
});
var vm = new Vue({
el:"#app",
data:{
stage:"放假",
open:true
}
})
</script>
</body>
</html>resultado de la operación:
Podemos ver que en el componente hijo se han definido los atributos de dos sistemas de administración educativa, msg y open, se ha utilizado el componente hijo en el componente padre, y se utiliza la instrucción v-bind para vincular nuestros dos atributos a recibir datos del componente principal. Entre nuestros componentes, podemos usar props para especificar requisitos de validación, en este momento, el valor obtenido por props es el valor de un objeto.
3. El componente hijo llama al componente padre
Aquí podemos explicar que cuando el componente principal llama a nuestro componente secundario vinculando el evento, este método se pasa al componente secundario y el evento puede activarse mediante $emit en el componente secundario. Esto no es difícil de entender, podemos entenderlo a través del código:
Ejemplo de código:
<!DOCTYPE html>
<html lang="en">
<head>
<title>组件之间的传递</title>
</head>
<body>
<div id="app">
<child v-on:fmethod="show"></child>
<p>{
{msg}}</p>
</div>
<template id="n1">
<div><button @click="myclick">调用父组件</button></div>
</template>
<script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
var clild = {
template:"#n1",
methods:{
myclick(){this.$emit('fmethod');}
}
};
var vm = new Vue({
el:"#app",
data:{msg:""},
methods:{
show(){this.msg="这里是父级组件的方法";}
},
components:{child:clild}
})
</script>
</body>
</html>Resultado de la ejecución: cuando hacemos clic, se puede ejecutar el método show del componente principal. como sigue:
En segundo lugar, el niño transmite datos al padre.
1. Usa eventos personalizados
Cuando el componente principal llama al componente secundario, primero vinculamos un evento personalizado a través de una instrucción v-on. En el componente secundario, podemos activar este evento de función a través de $emit y luego definir el evento de función en el componente principal. El método de procesar la función, pasar los datos al componente principal a través de tales parámetros de paso, esto sigue siendo muy simple y comprensible, entendemos nuestra definición a través del ejemplo de código,
Código de ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<title>组件之间的传递</title>
</head>
<body>
<div id="app">
<child v-on:fmethod="show"></child>
<p>{
{msg}}</p>
</div>
<template id="n1">
<div><button @click="myclick">调用父组件的方法</button></div>
</template>
<script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
var clild = {
template:"#n1",
data:function(){return {msg:"这里是来自子级组件的数据"}},
methods:{
myclick(){this.$emit('fmethod',this.msg);}
}
};
var vm = new Vue({
el:"#app",
data:{msg:""},
methods:{
show(data){this.msg=data;}
},
components:{child:clild}
})
</script>
</body>
</html>resultado de la operación:
Cuando se hace clic en el botón, se ejecuta el método myclick.El comando this.$emit en este método activará el evento fmethod, llamará al método show en el componente principal y luego pasará this.msg como argumento. como sigue:
2. Uso de $refs
Cuando se usa este concepto, podemos saber que el atributo ref se usa al llamar al componente hijo, y la instancia del componente correspondiente al valor del atributo de ref se obtiene a través de $refs.Después de obtener el componente padre, el componente hijo puede ser utilizado para controlar los datos del componente secundario. Al mismo tiempo, también puede obtener el método de subcomponentes. El concepto es muy simple. Podemos entenderlo a través del código:
Código de ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<title>组件之间的传递</title>
</head>
<body>
<div id="app">
<p>{
{msg}}</p><button v-on:click="My_click()">访问子组件的数据和方法</button>
<child ref="child1"></child>
</div>
<script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
var clild = {
template:"#n1",
data:function(){return {msg:"这里是来自子级组件的数据"}},
methods:{
myclick(){this.$emit('fmethod',this.msg);}
}
};
var vm = new Vue({
el:"#app",
data:{msg:"根组件data"},
methods:{
My_click(){
console.log(this.$emit.child.msg1);
this.$refs.child.show("已经被调用");
}
},
components:{
child:{
template:'<p>{
{msg1}}</p>',
data:function(){
return {msg1:"子组件数据"}
},
methods:{
show(data){
console.log("子组件方法"+data)
}
}
}
}
})
</script>
</body>
</html>resultado de la operación:
3. El mismo nivel de precio y transferencia de datos entre cualquier componente
Ya conocemos la transferencia de datos antes de los componentes padre e hijo, por lo que ahora tenemos que entender los componentes hermanos, el bus de tiempo se puede usar para la comunicación entre cualquier componente, a fin de usar el método para resolver la transferencia entre niveles.
En el código del programa, primero debemos definir el bus de eventos. Entre los dos componentes que usan el bus de eventos para transmitir datos, un componente puede usar el tiempo de escucha, el otro componente puede usar el evento desencadenante. Todavía podemos aprender sobre esto a través de un código de ejemplo:
Código de ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<title>组件之间的传递</title>
</head>
<body>
<div id="app">
<component-one></component-one>
<component-two></component-two>
</div>
<template id="n1">
<div style="border: 1px solid blue;padding: 10px;margin: 10px;">
我是哥哥，想要获取到弟弟的数据:{
{msg1}}
</div>
</template>
<template id="n2">
<div style="border: 1px solid blue;padding: 10px;margin: 10px;">
我是弟弟
<button @click="send">把弟弟的数据传给哥哥</button>
</div>
</template>
<script src="http://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
var bus = new Vue({});
var vm = new Vue({
el:"#app",
components:{
"component-one":{
template:'#n1',
data(){
return {msg1:""}
},
mounted(){
bus.$on("data-transmit",msgs2=>{
this.msg1 = msgs2
})
},
},
"component-two":{
template:"#n2",
data(){return {msg2:"我是弟弟的数据"}},
methods:{
send(){
bus.$emit("data-transmit",this.msg2);
}
}
}
}
})
</script>
</body>
</html>
Resultado de ejecución: haga clic en el botón para transferir los datos del hermano menor (componente) al hermano mayor (componente).
