Vue 3问题:呈现子组件的子组件
Vue 3问题:呈现子组件的子组件
提问于 2021-01-31 13:48:42
我使用Vue 3.0.5和Webpack 5.21.2创建了一个Webpack CLI 4.5.0应用程序。我构建了一个全局组件my-component.js
import SecondComponent from './second-component.vue';
app.component('global-component', {
template: `
<div>
<h1>Hi!</h1>
<second-component></second-component>
</div>
`,
components: {
SecondComponent
}
})进口second-component.vue
<template>
<div>
<div>{{someData}}</div>
<third-component :name="helloWorld"></third-component>
</div>
</template>
<script>
import ThirdComponent from './third-component.vue';
export default {
name: 'second-component',
components: {
ThirdComponent
},
data: function () {
return {
someData: 'Just some data!',
helloWorld: 'Hello World!',
}
}
}
</script>第三组件third-component.vue
<template>
<div>
<div>{{name}}</div>
</div>
</template>
<script>
export default {
name: 'third-component',
props: {
name: String,
}
}
</script>下面是webpack配置webpack.config.js
const { VueLoaderPlugin } = require('vue-loader');
module.exports = {
mode: 'production',
entry: {
global_component: './global-component.js',
},
output: {
path: `${__dirname}`,
filename: '[name]_bundled.js'
},
resolve: {
extensions: ['*', '.js', '.vue']
},
module: {
rules: [
{
test: /\.vue$/,
use: 'vue-loader'
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
]
}
]
},
plugins: [
new VueLoaderPlugin()
]
}我在index.html中使用的包文件如下所示：
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.5/vue.global.js"></script>
<script>const app = Vue.createApp({});</script>
<script type="application/javascript" src="global_component_bundled.js"></script>
<div id="app">
<global-component></global-component>
</div>
<script>app.mount("#app");</script>
</body>我遇到的问题是，子组件的子组件没有呈现。在我的例子中，这是我要导入到second-component.vue.中的组件second-component.vue.但是，当我将组件third-component.vue直接应用到my-component.js，中时，它可以工作。有人能解释一下为什么，我该怎么解决呢？这里我有一个码箱。
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-02-12 11:04:16
我寻找了很长一段时间的解决方案，最终得到了答案。我使用了来自CDN的CDN，在本例中，我应该使用webpack来使用外部Vue。只需在webpack.config.js中更改此配置即可
const { VueLoaderPlugin } = require('vue-loader');
module.exports = {
...
externals: {
// Here you tell webpack to take Vue from CDN
vue: "Vue"
},
...
}通过这些更改，webpack绑定组件并从CDN获取Vue。我希望这个答案能对其他人有所帮助。在这里，我已经做了一些修改：码箱。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65979840
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号