En el último número, hablamos sobre la comunicación de componentes y explicamos en detalle la comunicación de componentes de padres a hijos .
Dado que hay un componente principal para pasar un valor a un componente secundario , debe haber un componente secundario para pasar un valor al componente principal .
En este número, hablaremos del niño a padre en la comunicación de componentes .
<div id="app">
<App></App>
</div>
<script>
Vue.component('Child',{
template:`
<div>
<h2>我是子组件</h2>
<input type="text" @input="handleInput" />
</div>
`,
methods:{
handleInput(event){
const val = event.target.value;
this.$emit('inputHandler',val);
}
}
})
const App = {
data () {
return {
newVal:''
}
},
template:`
<div>
数据：{
{newVal}}
<Child @inputHandler = 'input' ></Child>
</div>
`,
methods: {
input(newVal){
this.newVal = newVal
}
}
}
new Vue({
el:'#app',
components: {
App
}
});
</script>
Por convención, todavía escribimos un componente global Child y un componente local App .
Debido a que usamos el componente Hijo en el componente Aplicación , existe una relación entre los componentes principal y secundario .
El proceso de pasar de hijo a padre:
- Primero vincule un evento personalizado en el componente secundario utilizado en el componente principal
- Luego vincule el evento nativo en el componente secundario, en la función de evento, active un evento personalizado a través de esto. $ Emit
La explicación puede ser un poco complicada, mira el código de muestra que publiqué.
Mirando primero el componente de la aplicación , escribimos un div con un newVal enlazado a él para mostrar el valor pasado desde el componente secundario , y usamos el componente secundario. Para este componente secundario, escribimos un evento personalizado @inputHandler = 'input' , y luego defina este evento de entrada en métodos, deje que asigne el valor del componente secundario a newVal y lo muestre .
Mire el componente Child . Este componente solo escribe un cuadro de entrada de entrada , recopila nuestra entrada y vincula un evento ** @ input = 'handleInput' ** con el que todos estamos familiarizados, y luego somos los más críticos en este handleInput , primero debemos obtener el valor de contenido que ingresamos como una operación normal , y luego pasarlo al componente principal a través de this. $ emit . El primer parámetro es el nombre del evento que personalizamos en el componente principal. inputHandler , el segundo parámetro es el valor que queremos transmitir .
Este es todo el proceso. Creo que ya lo he explicado en detalle. Si tienes alguna pregunta, ¡puedes agregarme a QQ para comunicarme!
Hay un diseño de curso de mini programa WeChat, necesidades de diseño completas, contacto personal QQ: 505417246
Preste atención a la siguiente cuenta pública de WeChat, puede recibir el subprograma de WeChat, Vue, TypeScript, front-end, uni-app, full stack, Nodejs, Python y otros materiales prácticos de aprendizaje. El
último y más completo resumen de conocimientos de front-end y El código fuente del proyecto se lanzará al público de WeChat tan pronto como sea posible No., por favor, preste atención, ¡gracias!
