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

Posted 2023-02-23

【中文标题】在 vue3 中导入外部组件和松散的反应性

【英文标题】：Import external component and loose reactivity in vue3

【发布时间】：2021-05-03 13:06:13

【问题描述】：

我有 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 中。

【参考方案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，但是像你一样我没有运气......

【讨论】：

我可以将我的问题追溯到合成 api。 Usimg import reactive from 'vue' 在插件中生成一个单独的 vue 副本。有几种解决方案，例如 package.json 中的“将 vue 添加为 dev/peerDependencies”，或者在 webpack 配置中将 vue 定义为外部。但不幸的是，这两种解决方案都不适合我......

【参考方案2】：

试试看

    import  defineAsyncComponent, defineComponent  from "vue"
    

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

【讨论】：

感谢您的帮助。我已经尝试过了，但它不起作用。我试图将我的 COunter.vue 组件放在我的应用程序及其作品的同一个文件夹中......这很奇怪......也许是 Lerna 的问题？