Hola, soy realmente nuevo en VUE y para este proyecto tengo un botón en una página que debería activar o llamar a la función de otra página. Todos dirán por qué no tiene el botón y la función en la misma página, ya que estoy tratando de aprender una parte básica de cómo llamar a la función de una página diferente y luego implementarla en mi proyecto. Estoy tratando de hacerlo más fácil y claro mientras hago una pregunta.
Cuando llamo a la función de método de chairPage.vue desde homePage.vue , arroja un error que dice que world no está definido en homePage.vue . ¿Alguien puede explicar por qué recibo este error y cuál es la mejor manera de resolverlo?
Tengo dos páginas, una es homePage.vue y otra es chair.Vue . Tengo un botón en homePage.vue que debería llamar a la función de método de chairPage.vue .
Página de inicio
<template> <div id="homepage"> <b-button variant="info" @click="buttonClicked()">Click</b-button> <chairComponent ref="world"/> </div> </template> <script> import chairComponent from '@/components/chair.vue'; export default { props: [], methods:{ buttonClicked(){ this.$refs.world.hello(); } } } </script>Página de la silla
<template> <div id="chairComponent"> <p v-if="displayText == '1'"> HELLO WORLD </p> </div> </template> <script> export default { props: ['world'], data(){ return{ displayText:'', } }, methods:{ hello(){ console.log('inside child component hello function'); this.displayText = '1'; } } } </script>Puede pasar accesorios a su componente secundario, y allí ver los accesorios y la función de llamada:
Vue.component('Chair', { template: ` <div id="chairComponent"> <p v-if="displayText == '1'"> HELLO WORLD </p> </div> `, props: ['world'], data(){ return{ displayText:'', } }, methods:{ hello(){ console.log('inside child component hello function'); this.displayText = '1'; } }, watch: { world() { if (this.world) this.hello() } } }) new Vue({ el: '#demo', data() { return { val: null } }, methods:{ buttonClicked(){ this.val = true setTimeout(() => {this.val = false},0) } } }) <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" /> <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" /> <script src="//unpkg.com/vue@latest/dist/vue.min.js"></script> <script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script> <script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script> <div id="demo"> <div id="homepage"> <b-button variant="info" @click="buttonClicked">Click</b-button> <chair :world="val" /> </div> </div>Funciona perfectamente bien en el siguiente fragmento
Vue.component('Chair', { template: ` <div id="chairComponent"> </div> `, data(){ return{ displayText:'', } }, methods:{ hello(){ console.log('inside child component hello function'); } }, }) new Vue({ el: '#demo', methods:{ buttonClicked(){ this.$refs.world.hello(); } } }) <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" /> <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" /> <script src="//unpkg.com/vue@latest/dist/vue.min.js"></script> <script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script> <script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script> <div id="demo"> <div id="homepage"> <b-button variant="info" @click="buttonClicked">Click</b-button> <chair ref="world" /> </div> </div>Supongo que agregar la sección de componentes en homepage.vue podría hacer que funcione
<template> <div id="homepage"> <b-button variant="info" @click="buttonClicked()">Click</b-button> <chairComponent ref="world"/> </div> </template> <script> import chairComponent from '@/components/chair.vue'; export default { props: [], // New changes added below components: { chairComponent }, methods:{ buttonClicked(){ this.$refs.world.hello(); } } } </script>Puede $emitir de niños a padres https://vuejs.org/v2/guide/components-custom-events.html
Niño
hello () { ...//yours code this.$emit('customEvent', someValue) }Padre
<template> <child @cutomEvent="function" /> <template>