有没有办法在组件外部但在已安装的 div #app 内部输出组件数据？

Question

在 Vue 3 中推荐这样的东西，您可以在 中使用 setup() 方法从安装的 #app div 之间的组件输出变量main.js？这里有什么好的做法？ 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），你应该避免将函数作为模板的一部分（除了触发操作），因为它们不会被缓存，所以它们每次都需要执行更改，减慢组件渲染。

很难给出明确的建议，因为访问 child 组件数据的请求非常通用，因此我将列出两种常见模式。该列表当然并不详尽，因为有许多创造性的方法可以做到这一点。

全球商店

如果您使用全局可访问变量，child 和 parent 都可以访问它，无论相距多远。组件甚至不需要是后代，因为数据是全局可访问的。一种方法是使用 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>

和

component-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>

活动

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

道具向下传播，事件向上冒泡。因此，这意味着如果您想访问 child 拥有而 parent 没有的任何数据，您可以使用事件。

常见的设置是让 parent 组件设置一个反应变量，该变量会在 child 数据更新时更新（这是 more-or-less 如何 v-model作品）

component-a.vue

（不使用组合 api，通过 setup() 发出的效果有点不同）

<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");

有没有办法在组件外部但在已安装的 div #app 内部输出组件数据？

Is there a way to output component data outside a component but inside the mounted div #app?

vue.js

vuejs2

vue-component

vuejs3

全球商店

mydata.js

main.js

应用模板

component-a.vue

活动

component-a.vue

应用模板

main.js