有没有一种方法可以在组件之外但在已安装的div#app内部输出组件数据

Question

在Vue 3中是否建议这样做，在Vue中，您可以使用main.js中的setup()方法从安装的#appdiv之间的组件输出变量？在这里什么是好的练习？ComponentA.data().someData让我觉得有点不对劲。

component.php

<div id="app">
<component-a />
<!-- Not quite sure if this is the right way... -->
<!-- But would like to output the component data here instead of 
inside the <template> of ComponentA if possible. -->
<div>{{ ComponentA.data().someData }}</div> 
</div>

main.js

import { createApp } from 'vue';
import componentA from '@/components/component-a';
const app = createApp({
setup() {
return {
ComponentA
}
}
});
app.component('component-a', componentA);
app.mount("#app");

组件-a.vue

<template>
<div>Component A</div>
</template>
<script>
export default {
name: 'ComponentA',
data() {
return {
someData: 'this is some data',
};
},
};
</script>

Answer 1

这绝对不是一个好主意(Vue 2或Vue3(，你应该避免将函数作为模板的一部分(除了触发操作(，因为它们不会被缓存，所以每次发生任何变化时都需要执行，这会减慢组件渲染的速度。

很难给出明确的建议，因为访问子组件数据的请求非常通用，所以我将列出两种常见的模式。这个列表肯定不是详尽无遗的，因为有很多创造性的方法可以做到这一点。

全球商店

如果使用全局可访问的变量，则无论相距多远，子变量和父变量都可以访问该变量。组件甚至不需要是子体，因为数据是全局可访问的。一种方法是使用Vuex。但是，由于您使用的是v3(尽管v2.6+通过observables具有类似的功能(，您可以使用未附加到组件的数据。

mydata.js

import { ref } from 'vue';
export const someData = ref('this is some data');

然后你可以在任何地方使用

main.js

import { someData } from './mydata.js';
import { createApp } from 'vue';
import componentA from '@/components/component-a';
const app = createApp({
setup() {
return {
someData
}
}
});
app.component('component-a', componentA);
app.mount("#app");

和

应用程序模板

<div id="app">
<component-a />
<div>{{ someData }}</div> 
</div>

和

组件-a.vue

<template>
<div>Component A</div>
</template>
<script>
import { someData } from './mydata.js';
export default {
name: 'ComponentA',
setup() {
someData.value="I'm now updated";
return {};
},
};
</script>

事件

如果您确实有直接的父/子关系，并且有多个子实例，您可能会发现全局存储不太适合，在这种情况下，您可以使用"；初级"；处理这个问题的方法。

道具向下传播，事件向上冒泡。这意味着，如果你想访问孩子拥有的任何数据，而父母不会，你可以使用事件。

常见的设置是让父组件设置一个反应变量，该变量将在子数据更新时更新(这或多或少是v-model的工作方式(

组件-a.vue

(不使用composition api，通过setup((emit的工作方式有点不同(

<template>
<div>Component A</div>
</template>
<script>
export default {
name: 'ComponentA',
data() {
return {
someData: 'this is some data',
};
},
watch: {
someData: {
immediate: true,
handler(newValue, oldValue) {
this.$emit('onDataChange', newValue)
}
}
},
};
</script>

应用程序模板

<div id="app">
<component-a @onDataChange="updateMyData"/>
<div>{{ myData }}</div> 
</div>

main.js

import { createApp, ref } from 'vue';
import componentA from '@/components/component-a';
const app = createApp({
setup() {
const myData = ref('');
const updateMyData = (data) => myData.value = data;
return {
myData, updateMyData
}
}
});
app.component('component-a', componentA);
app.mount("#app");