Vue 3:访问组件内部的数据对象
Vue 3:访问组件内部的数据对象
提问于 2020-10-21 20:29:40
这段代码来自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); // {}回答 3
Stack Overflow用户
发布于 2020-10-21 20:54:07
定义一个normal data选项并将该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>
Stack Overflow用户
发布于 2020-10-21 21:32:47
显然，您的options对象具有错误的签名。尝试将选项变量更改为：
let options = {
data: {
index: window[this.data.get('index')]
}
};Stack Overflow用户
发布于 2020-10-22 00:36:16
如果你使用render函数只是为了传递变量给它，你也可以使用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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64463554
复制相关文章
相似问题
腾讯云开发者
