有没有办法在组件外部但在已挂载的div #app内部输出组件数据？ mydata.js main.js 应用模板 component-a.vue component-a.vue 应用模板 main.js

问题描述

在Vue 3中是否有类似的建议，您可以使用 main.js 中的#app方法从已安装的setup() div之间的组件中输出变量？这里有什么好的做法？ 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");

component-a.vue

<template>
    <div>Component A</div>
</template>

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

解决方法

绝对不是一个好主意（Vue 2或Vue3），您应该避免将函数作为模板的一部分（而不是用于触发操作），因为它们不会被缓存，因此每次发生任何更改时，它们都需要执行，减慢组件渲染的速度。

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

全球商店

如果您使用全局可访问的变量，则无论父级还是子级都可以访问该变量，无论距离有多远。组件甚至不需要成为后代，因为数据是全局可访问的。一种实现方法是使用Vuex。但是，由于您使用的是v3（尽管v2.6 +通过可观察对象具有类似的功能），所以您可以使用未附加到组件的数据。

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>

事件

如果您确实具有直接的父/子关系，并且有多个child实例，则可能会发现全局存储不太适合，在这种情况下，您可以使用“主要”方式进行处理。 / p>

道具传播向下，事件冒泡。因此，这意味着，如果您要访问子级拥有的任何数据，而父级则不需要，则可以使用事件。

常见的设置是让父组件设置一个反应性变量，该变量将在子数据更新时进行更新（这或多或少是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");