Vue.js 从方法访问子属性答案

【问题标题】：Vue.js access child prop from methodVue.js 从方法访问子属性
【发布时间】：2021-11-07 12:51:56
【问题描述】：

我在 Vue.js 中创建了两个组件，主要的一个使用一个名为 NoteRenderer 的子组件，它定义了一个名为 data_exchange 的 prop。单击按钮时，我想从主组件修改道具。我认为这段代码可以工作：

<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>

但我收到运行时错误Uncaught TypeError: this.nra is undefined。我应该如何在update_nra()方法中操作实例NoteRenderer实例nra？

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

我看到另一个有代码的答案，但没有解释，所以我尝试提供一个。

在 Vue 中，属性是您传递给组件的东西，因此，在您的主组件中，您应该有一个数据变量，您可以在其中更改值，然后您必须将该变量绑定为子组件的属性.

访问另一个组件的内部不是一个好习惯，相反，您应该遵循 Vue API。

请注意，不应从组件内部更改属性，而是传递该属性的代码是更改的所有者。

这样数据流更清晰，代码bug更少，即使有bug也很容易理解。

【讨论】：

我明白了。缺点是您必须将所有道具“复制”为父组件中的变量？
并非总是如此，prop 可以只是一个方法调用。

【解决方案2】：

试试这个方法：

<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>

【讨论】：