如何在新的 Vue3 项目中使用 Vue2 旧组件（.vue 文件）？
Posted
技术标签:
【中文标题】如何在新的 Vue3 项目中使用 Vue2 旧组件（.vue 文件）？【英文标题】：How can I use Vue2 old component (.vue file) with a new Vue3 project? 【发布时间】：2021-01-15 05:04:22 【问题描述】：Vue3 版本已经发布，但我没有看到任何在新版本中使用旧组件代码的示例。怎么会？
这是我的 index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Vue 3 Example using Vue 2 component</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<h1> product </h1>
<my-old-vue-component :my-prop="'my string in here'"></my-old-vue-component>
</div>
<script src="./main.js"></script>
<script src="./myOldVueComponent.vue"></script>
<!-- Mount App -->
<script>
const mountedApp = app.mount('#app')
</script>
</body>
</html>
这是我的 main.js：
const app = Vue.createApp(
data()
return
product: 'my product',
)
这是我的旧的简单 Vue2 组件（myOldVueComponent.vue）：
<template>
<div>
myProp
</div>
</template>
<script>
export default
name: "myOldVueComponent",
props:
myProp: type: String
,
data()
return
,
</script>
我在导入“.vue”文件时遇到错误：
未捕获的语法错误：
意外的令牌'
（意思是我的旧组件中的<template> 标签。
【问题讨论】：
是的，关于带有 标签的第一行.vue 文件在 vue3 上工作得很好，你的问题一定出在其他地方
尝试使用 JS 导入来添加组件，而不是添加脚本标签
【参考方案1】：
Vue2 组件在 Vue3 中工作。这不是您的代码中的问题。
问题出在这里：
<script src="./myOldVueComponent.vue"></script>
您不能直接在浏览器中导入 .vue 文件。你不能在 vue 1,2 中做到这一点，你还不能在 vue 3 中做到这一点。浏览器无法理解该语法，需要一个捆绑器来转换你的代码是浏览器可以使用的东西。最受欢迎的打包工具是 webpack、rollup ecc ecc
见：https://v3.vuejs.org/guide/single-file-component.html#for-users-new-to-module-build-systems-in-javascript
我强烈建议您使用 Vue cli 来设置您的项目，特别是如果您是 npm/bundlers 世界的初学者
【讨论】：
挂载没有变化，例如在旧代码中？什么都没有？ 有一些变化，但它们仍然兼容，并且您得到的错误不是由 vue 2/vue 3 兼容性问题引起的 有重大更改，因此并非所有 vue 2 组件都与 vue 3 兼容。v3.vuejs.org/guide/migration/array-refs.html 重大更改之一，v-for refs in vue 2 分配给数组，v-for refs in vue 3 使用函数回调。 @gbalduzzi 你好，你从哪里读到“Vue2 组件在 Vue3 中工作”。 ?我很好奇，因为我找不到来源，我需要它，因为我想我听到了同样的事情。以上是关于如何在新的 Vue3 项目中使用 Vue2 旧组件（.vue 文件）？的主要内容，如果未能解决你的问题，请参考以下文章
vue2升级vue3：Vue2/3插槽——vue3的jsx组件插槽slot怎么处理
如何在 Vue 3 中使用来自 Vue2 Web 组件的插槽？