组件库在自己的example里面点击add是可以运行的，外部项目引入的时候点击有输出但是页面不更新

来源：11-9 npm link关联组件库+eslint初始化

GreenRecruit

2021-03-25

图片描述
这是在组件库中点击add事件是可以正常运行的

这是在外部项目中引入然后点击add事件，是有输出但是没有更新页面count和doublecount没有更新

这是Test.vue的源代码

<template>
  <div class="test">
    <div>message:{{ message }}</div>
    <div>doubleCount: {{ doubleCount }}</div>
    <div>Count: {{count}}</div>
    <button @click="add">add</button>
  </div>
</template>

<script>
import { computed, ref } from "vue";
export default {
  name: "TestComponent",
  setup() {
    const message = "hello world!!!";
    const count = ref(1);
    const doubleCount = computed(() => count.value * 2);
    const add = () => {
      console.log(111);
      count.value++;
    };
    return {
      message,
      doubleCount,
      add,
      count,
    };
  },
};
</script>

<style lang="scss" scoped>
.test {
  color: red;
}
</style>

写回答

3回答

扬_灵

2021-03-25

同学你好，可以把完整的项目上传到github或是码云这些代码托管平台，把地址发一下，我在本地帮你测试定位一下问题。

扬_灵

GreenRecruit

同学你好，测试了你的代码没有复现出上述的问题。我使用的vue版本是3.0.7 试着切换一下版本。

2021-03-26

共2条回复

风林MKII

2021-07-17

同学我也遇到这个问题了你解决了吗

kruup

2021-03-27

同学 -- 你这个问题解决了吗？我也遇到了？ vue 升级到 @3.0.7 也不行

kruup

"rollup-plugin-vue", @vue/compiler-sfc 这两个回退到 beta版本可以正常运行 "rollup-plugin-vue": "^6.0.0" "@vue/compiler-sfc": "^3.0.7" 这个版本编译的 add事件使用的是 self.call() 应该是没有取到正确的上下文 ctx (猜的) 具体还吗查到总结就是 plugin 的版本不匹配

2021-03-28

共1条回复

数据可视化入门到精通-打造前端差异化竞争力

同级别前端，掌握数据可视化薪资更高

1520 学习 · 1043 问题

查看课程

相似问题

组件的引用有问题,都没有报错,但是引用的组件只是显示个按钮

回答 2

更新自定义组件库不自动更新

回答 2

崩了啊

回答 1

rollup打包问题

回答 1

echarts点击事件

回答 1

打开慕课网App查看更多内容