如何从外部修改Vue应用的属性？实例直接赋值无效的解决方法

你直接给app（应用实例）赋值message无效的核心原因是：Vue.createApp()返回的是应用根实例，而组件的响应式数据message属于挂载后的根组件实例，两者不是同一个对象。

要实现外部修改组件属性，只需两步：

• 保存mount()方法的返回值，这个返回值才是包含响应式数据的根组件实例
• 通过该组件实例直接修改message，Vue3会自动触发视图更新

修改后的完整代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>The template configuration option</title>
  <style>
    #app {
      display: inline-block;
      padding: 10px;
      font-size: x-large;
      background-color: lightgreen;
    }
  </style>
</head>

<body>
  <h1>'template' Example</h1>

  <p>All HTML code from inside the div tag with id="app" is moved inside the 'template' configuration option, in backtick quotes.</p>

  <div id="app"></div>

  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

  <script>
    const app = Vue.createApp({
      template: `<h1>{{ message }}</h1>
    <p>This is a second line of HTML code, inside backtick quotes</p>`,
      data() {
        return {
          message: "Hello World!"
        }
      }
    })

    // 保存根组件实例
    const vm = app.mount('#app');
    // 通过组件实例修改响应式属性
    vm.message = "My name is Florian"; // 现在可以正常生效
  </script>
</body>
</html>

补充说明 #

如果是大型项目，直接操作组件实例的方式不够规范，建议使用provide/inject实现跨组件传递数据，或用Pinia这类状态管理工具统一管理全局状态。但对于简单的单组件场景，直接操作根组件实例是最便捷的方案。

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