在 vue3 中导入外部组件和松散的反应性

Question

我有 2 个项目/文件夹（根目录上有 Lerna）。

第一个是带有一些组件的 uicomponents，第二个是测试一个使用 uicomponents 中的一些组件的简单应用程序。

我创建了一个简单的计数器组件（Counter.vue）：

<template>
  <div>
    <h3>Total clicks: {{ count }}</h3>
    <div class="button-container">
      <button class="inc" @click.prevent="increment">Add</button>
      <button class="dec" @click.prevent="decrement">Subtract</button>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'Counter',
  props: {
    startingNumber: {
      type: Number,
      required: false,
      default: 0,
    },
  },
  setup(props) {
    const count = ref(props.startingNumber);
    const increment = () => {
      count.value += 1;
      alert(count.value);
    };
    const decrement = () => {
      count.value -= 1;
    };
    return {
      count,
      increment,
      decrement,
    };
  },
});
</script>

然后我将它导入我的应用程序中的一个简单页面：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <counter :starting-number="5"></counter>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import Counter from '@uicomponents/counter';

export default defineComponent({
  name: 'HelloWorld',
  components: {
    Counter,
  },
  props: {
    msg: {
      type: String,
      required: false,
      default: 'Me',
    },
  },
});
</script>

Lerna 正确替换了我所有的组件路径，并且我在我的页面中使用所有 HTML 检索了我的组件计数器。按钮效果很好，我的警报显示为正确的值但我的 html 没有刷新。

此文本<h3>Total clicks: {{ count }}</h3> 保持“总点击次数：0”。我的“计数”参考更新得很好，因为警报显示它正确但不是在 html 中。

Answer 1

我也有类似的反应性丧失问题。我的设置有点不同，但最终结果是一样的。

我正在尝试构建一个加载外部组件的小型插件系统 我大致尝试这样做

// pluginSystem.js is accessible through window.myps
// ...
init(app) {
    vueApp = app;
},
// ...
loadPlugin(data) {
    vueApp.component(data.component.name, data.component);
}

我的外部组件看起来像这样

// main.js
import Counter from './components/Counter.vue';

window.myps.loadPlugin({
    component: Counter,
});

计数器中的按钮单击等工作，控制台日志记录也很好，但组件数据没有更新。 我也尝试过defineComponent和defineAsyncComponent，但是像你一样我没有运气......

Answer 2

试试看

    import { defineAsyncComponent, defineComponent } from "vue"
    

components: {         
      Counter:defineAsyncComponent(() => import("@uicomponents/counter"))
    }