如何解决Vue 3 问题渲染子组件的子组件
我使用 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 中的组件 third-component.vue。但是,当我将 third-component.vue 组件直接用于 my-component.js 时,它可以工作。有人可以解释为什么以及如何解决这个问题吗?我这里有一个 codesandbox。
解决方法
找了很久,终于搞定了。我使用了 vue
中的 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
捆绑组件并从 Vue
中获取 CDN
。我希望这个答案能帮助其他人。在这里,我已经进行了更改:codesandbox。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。