En primer lugar, vamos a definir las tres páginas, una página principal, dos sub-páginas
Ejemplo: myForm myTabel y dos sub-páginas se definen
El primer paso: la introducción de la página de inicio
importación de myForm "@ / MiFormulario"; importación de myTabel "@ / MiTabla";
Paso dos: Componentes (registro de completar registrado o será error debe ser el tercer paso).
componentes: {
myForm,
myTabel,
}
El tercer paso: Insertar
<myForm> </ myForm> <myTabel> </ myTabel>
Por el método de valor -----------
Padre a hijo
Ejemplo: I definida una lista de datos de los datos;
lista: [
{id: 1, nombre: "铁柱", edad: 18, el sexo: "男"},
]
El primer paso: a los datos de transferencia
<MyTabel: parentData = "lista"> </ myTabel>
: Sub-páginas a recibir el nombre = ' necesidad de pasar el apellido '
Paso dos: sub-páginas reciben datos
apoyos: [ 'parentData']
la transmisión entre padres e hijos
Ejemplo:
El primer paso: definir un evento
<Tipo el-botón = "primaria" @ clic = "updateBtn (item.id)"> 确 定 </ el-botón>
Segundo paso: métodos método de escritura
métodos: {
updateBtn (id) {
. Estos $ emiten ( "update-data", id);
}
}
(), El primer parámetro es el nombre de las necesidades de eventos de páginas principal para ser recibido, y el segundo parámetro es la información que necesita para pasar en el pasado.
El tercer paso: la página principal receptora
<MyTabel: list = "lista" @ update-data = "UpdateData"> </ myTabel>
Uso @ recepción, el primer valor de la sub-página Nombre de definición, detrás del nombre de esta página es la propia definición de caso, por un evento, obtener el valor
Hermanos por valor
En primer lugar, definimos un método en el main.js
Vue.prototype. Nombre de método = new Vue ()
Una página
<type = el-botón de "primarias" @ Haga clic = "updateBtn (item.id)">确定<el-botón />
métodos: {
updateBtn (id) {
. this.public $ emiten ( "update-datos", carné de identidad);
}
}
Del mismo modo, definir un evento, a continuación, utilizar this.public. $ ( "Emitir necesidades segunda página para recibir el nombre", "El segundo valor es el pase de datos") los datos entrantes
página dos
Ejemplo: En la creada función de recepción en el ciclo de vida
creado () {
This.public. $ en ( 'update-datos', valor => {
console.log (valor)取值
})
}
. $ This.public en ( " por primera vez en una página de definición de nombre " , " la segunda es una función (parámetro 1 : el último pase las páginas de datos) ")