Vue.js父组件方法内如何访问并修改子组件NoteRenderer的prop

错误原因 #

Vue不会将组件注册时定义的组件别名（nra、nrb）直接挂载到父组件的this实例上，因此this.nra取值为undefined，触发类型错误。

推荐方案（符合Vue单向数据流规范） #

Vue推荐通过父组件响应式数据向下传递Prop的方式更新子组件状态，不要直接修改子组件实例属性，实现方式如下：

<template>
    <div>
        <h1>Study</h1>
         <button @click="update_nra()">Change NodeRenderer text.</button> 
    </div>
    <!-- 将父组件响应式变量绑定到子组件的data_exchange Prop -->
    <nra :data_exchange="nraText"/>
    <nrb/>
</template>

<script>
import NoteRenderer from '../components/NoteRenderer.vue'

export default {
    components: {
        'nra': NoteRenderer,
        'nrb': NoteRenderer
    },
    // 定义绑定子组件Prop的响应式变量
    data() {
        return {
            nraText: '' // 可填写子组件Prop的初始值
        }
    },
    methods: {
        update_nra: function() {
            // 修改父组件自身的响应式变量，会自动同步到子组件
            this.nraText = "new text";
        }
    }
}
</script>

备选方案（直接获取子组件实例，仅特殊场景使用） #

如果确实需要直接操作子组件实例，可以通过ref标记子组件后访问：

1. 给模板中的nra组件添加ref属性：

<nra ref="nraInstance"/>

2. 修改方法中访问实例的逻辑：

update_nra: function() {
    this.$refs.nraInstance.data_exchange = "new text";
}

注意：该写法直接修改子组件Prop，违反单向数据流原则，Vue开发模式下会抛出警告，不推荐常规场景使用。

内容的提问来源于stack exchange，提问作者vkubicki