Vue 3：访问​​组件内的数据对象

Question

Vue 3 文档中的这段代码，它正在运行。

const data = { a: 1 }

// The object is added to a component instance
const vm = Vue.createApp({
  data() {
    return data
  }
}).mount('#app')

console.log(vm.a) // => 1

但是，如果我使用render() 函数创建组件，我无法访问数据对象。

let options = window[this.data.get('index')];
options.baseUrl = window['baseUrl'];
const app2 = Vue.createApp({
     render() {
         const {h} = Vue;
             return h(app.component('ComponentA'), options)
         }
      })
     .mount("#app");

console.log(app2.baseUrl);  // undefined
console.log(app2.$data); // {}

Answer 1

定义一个普通数据选项并将 options 添加到其中：

let options = {}
options.baseUrl = "someurl.com";
const app2 = Vue.createApp({
    data() {
      return {
        options
      }
    },
    render() {

      const {
        h
      } = Vue;
      return h(Vue.createApp({}).component('ComponentA', {
        template: '<h1>hello</h1>'
      }))
    }
  })
  .mount("#app");

console.log(app2.options);

<script src="https://unpkg.com/vue@3.0.0-rc.11/dist/vue.global.prod.js"></script>

<div id="app" someVariable='some value'>
  Vue 3 app
</div>

Answer 2

显然您的 options 对象的签名错误。 尝试将您的选项变量更改为：

let options = {
  data: {
    index: window[this.data.get('index')]
  }
};

Answer 3

如果您使用渲染函数仅将变量传递给它，您还可以使用createApp 的第二个参数来填充道具。

如果您想更改 options 反应式，您可以使用 $props 作为 options 对象的反应式版本。您可以重新分配options 或使用新变量。这将使更改在应用程序中反应，因此更改应用程序之外的值将更新应用程序。对app2.baseUrl 的更改不会是反应性的，但reactiveOptions.baseUrl 会是反应性的。

示例：

let options = { baseUrl: "localhost:3k/" }

const app2 = Vue.createApp({
  props: ['baseUrl'],
  template:'<h1>APP2 @{{ baseUrl }}</h1>'
}, options).mount("#app");

let reactiveOptions = app2.$props;

console.log(app2.baseUrl);
console.log(reactiveOptions);

function onClick(){
  reactiveOptions.baseUrl += "&key="
}

<script src="https://unpkg.com/vue@3.0.0-rc.13/dist/vue.global.prod.js"></script>
<div id="app"></div>

<Button onclick="onClick()">change</Button>