Vue.js 从方法访问子属性

Posted 2023-02-23

【中文标题】Vue.js 从方法访问子属性

【英文标题】：Vue.js access child prop from method

【发布时间】：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？

【参考方案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>