Creé dos componentes en Vue.js, el principal usa un componente secundario llamado NoteRenderer , que tiene un accesorio llamado data_exchange definido. Quiero modificar el accesorio del componente principal cuando se hace clic en un botón. Pensé que este código funcionaría:
<template> <div> <h1>Study</h1> <button @click="update_nra()">Change NodeRenderer text.</button> </div> <nra/> <nrb/> </template> <script> import NoteRenderer from '../components/NoteRenderer.vue' export default { components: { 'nra': NoteRenderer, 'nrb': NoteRenderer }, methods: { update_nra: function() { this.nra.exchange_data = "new text"; } } } </script> Pero aparece el error de tiempo de ejecución Uncaught TypeError: this.nra is undefined . ¿Cómo debo manipular la instancia nra de NoteRenderer en el método update_nra() ?
Prueba de esta manera:
<template> <div> <h1>Study</h1> <button @click="update_nra()">Change NodeRenderer text.</button> </div> <nra :exchange_data="exchange_data" /> <nrb/> </template> <script> import NoteRenderer from '../components/NoteRenderer.vue' export default { data() { return { exchange_data: '' } }, components: { 'nra': NoteRenderer, 'nrb': NoteRenderer }, methods: { update_nra: function() { this.exchange_data = "new text"; } } } </script> Vue.component('nra', { template: ` <div> {{exchange_data}} </div> `, props: ['exchange_data'] }) new Vue({ el: '#demo', data() { return { exchange_data: 'old text' } }, methods: { update_nra: function() { this.exchange_data = "new text"; } } }) Vue.config.productionTip = false Vue.config.devtools = false <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="demo"> <template> <div> <h1>demo</h1> <button @click="update_nra()">Change NodeRenderer text.</button> </div> <nra :exchange_data="exchange_data" /> </template> </div>Veo la otra respuesta que tiene el código, pero no una explicación, así que trato de proporcionar una.
En Vue, las propiedades son algo que pasa a un Componente, por lo tanto, en su componente principal debe tener una variable de datos, donde cambia el valor y luego debe vincular esa variable como una propiedad del subcomponente.
No es una buena práctica acceder a las partes internas de otro componente; en su lugar, debe seguir la API de Vue.
Tenga en cuenta que las propiedades no deben cambiarse desde dentro de un componente, sino que el código que pasó esa propiedad es el propietario de los cambios.
De esta manera, el flujo de datos es mucho más claro y el código tendrá menos errores e incluso con errores será mucho más fácil de entender.