Continuando con el artículo anterior, el componente principal de vue obtiene el valor del componente secundario . Si el componente principal necesita llamar activamente al método de propiedad en el componente secundario, ¿cómo implementarlo?
Como obtener
1. Cuando utilice el componente secundario en el componente principal, defina un atributo ref para el componente secundario
2. El componente padre puede manipular las propiedades y métodos del componente hijo a través de esto. $ Refs.XXX
Subcomponente Sub1.vue
<template>
<module: title = "title" />
<button: click = "run ()"> </button>
</template>
<script> export {
name: "Sub1",
data () {{
// El componente principal se puede llamar al título del
título a través de la referencia definida : ''
}
}
, métodos {
run () {
console.log ("sub1");}
}
} </script>
Componente padre
<template>
<! - Cuando utilice componentes secundarios aquí, defina un atributo de referencia 1 ->
<sub1 = "sub" />
<button @ click = "callChild ()"> </button>
</template>
<script > export {
name: 'app',
data () {{
title: 'test'
}
}, methods {
callChild () {
// Puede usar el atributo de título en el componente hijo
console.log (this. $ refs. title)
// Esto puede usar el método de subcomponentes
this. $ ref.run ();
}
}, components: {
Sub1}
} </script>
Blogger: prueba para ganar dinero
Lema: Centrarse en las pruebas y la automatización, y esforzarse por mejorar la eficiencia de la I + D; a través de las pruebas y la diligencia para completar la acumulación original, a través de la lectura y la gestión financiera hasta la libertad financiera.
csdn: https://blog.csdn.net/ccgshigao
Blog Park: https://www.cnblogs.com/qa-freeroad/