Vue中如何从组件读写应用实例中的变量？

你当前的代码已经实现了读取根实例变量的逻辑，但要写入/更新根实例变量，需要遵循Vue的单向数据流规则，通过自定义事件通知根实例修改。下面结合你的现有结构给出具体修改方案：

1. 修正根实例的组件注册错误 #

你当前根实例的components选项用了数组写法，Vue 3中这个选项需要是对象格式，否则组件无法正确注册：

let app = Vue.createApp({
    // 修正为对象格式
    components: { contrib },
    data(){
        return{
            contButton:"first value",
        }
    },
    methods: {
        // 添加方法用于更新根实例变量
        updateContButton(newValue) {
            this.contButton = newValue;
        }
    },
})

2. 组件中触发自定义事件通知根实例更新 #

子组件不能直接修改props，需要通过$emit触发自定义事件，把要更新的值传递给根实例：

app.component('contrib',{
    props:['contButton'],
    template: `
    <div>
        <button class="button is-small" id="myBtn" @click="showCont">{{contButton}}</button>
    </div>
    `,
    data(){
        return{
            newCont:null,
        }
    },
    methods:{
        showCont() {
            // 读取根实例传递的变量（你已实现此步骤）
            this.newCont = this.contButton;
            console.log(this.newCont);

            // 示例：设置新值并通知根实例更新
            this.newCont = "更新后的按钮文本";
            // 触发自定义事件，传递新值
            this.$emit('update-cont-button', this.newCont);
        },
    }
})

3. 在根实例挂载模板中绑定事件 #

在页面的#app容器里，给组件绑定自定义事件，指定根实例的处理方法：

<div id="app">
    <contrib :cont-button="contButton" @update-cont-button="updateContButton"></contrib>
</div>

核心逻辑说明 #

• 读取根实例变量：通过props传递，组件内直接用this.contButton访问即可，这是你已经实现的逻辑。
• 写入根实例变量：Vue遵循单向数据流，子组件不能直接修改props，必须通过自定义事件将新值传递给根实例，由根实例自行修改数据，以此保证数据流的可追踪性。

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