Vue 3 问题渲染子组件的子组件

编程问答 2022-05-27

问题描述

我使用 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。

vue.jsvuejs3webpackwebpackwebpackwebpack-5webpack-cli