我是不是需要（或应该）将我所有的 Vue 组件包装在一个包装器组件中？

Posted 2023-02-23

技术标签:

【中文标题】我是不是需要（或应该）将我所有的 Vue 组件包装在一个包装器组件中？【英文标题】：Do I need to (or should I) wrap all my Vue components in a wrapper component?我是否需要（或应该）将我所有的 Vue 组件包装在一个包装器组件中？ 【发布时间】：2018-09-27 13:07:37 【问题描述】：

我正在尝试将 Webpack 4.5 和 Vue 组件放在一起。 构建很好，我在屏幕上看到了预期的两个组件（详情如下）。

创建这个基本的 SPA 是一个非常反复的过程，从各种来源收集信息（并不总是一致的）。我终于结束了：

包含一个 Vue 组件的 html 文件，是整个 SPA 的包装器上面的 Vue 组件，它本身带来了实际有用的组件

有没有办法跳过包装器组件，以便我可以直接编辑 HTML 文件（并链接 CSS 样式文件）？然后我会定义一个 CSS 网格并将组件放置在其中。

或者我没有预见到保持这种方式有什么好处？

当前项目文件：

在浏览器中打开的 HTML 文件

<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <infoscreen id="infoscreen"></infoscreen>
</body>
<script src="bundle.js"></script>

</html>

webpack 配置文件

'use strict'
const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin')


module.exports = 
    mode: 'development',
    entry: [
        './src/entry.js'
    ],
    output: 
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    ,
    module: 
        rules: [
            
                test: /\.vue$/,
                loader: 'vue-loader'
            
        ]
    ,
    plugins: [
        new CopyWebpackPlugin([
            from: 'src/infoscreen.html',
            to: 'infoscreen.html'
        ])
    ]

`entry.js` 文件

import infoscreen from "./infoscreen.vue"
import Vue from "vue/dist/vue.js"
Vue.component("infoscreen", infoscreen)

new Vue( el: "infoscreen" )

Vue 包装器组件 (`infoscreen.vue`)

这是我要去掉的文件，直接在上面的HTML文件中使用<temperature-outside></temperature-outside>

<template>
    <div id="app">
        <temperature-outside></temperature-outside>
        <temperature-outside></temperature-outside>
    </div>
</template>

<script>
    import temperatureOutside from './temperatureOutside.vue'

    export default 
        name: 'infoscreen',
        components: 
            'temperature-outside': temperatureOutside
        
    
</script>

Vue 组件 (`temperatureOutside.vue`)

<template>
<div>
  hello yo
</div>
</template>

<script>
export default 
  name: 'temperatureOutside',
  data: function () 
    return 
      yo: "world"
    
  

</script>

【问题讨论】：

【参考方案1】：

Vue 组件在 Vue 实例的上下文中被识别。事实证明，您需要在 html 中安装一个安装点，包装或父 Vue 组件将安装所有已注册的子组件。

Registering Components

【讨论】：

好的，换句话说，我必须使用我在问题中提供的代码？ @Woj 是的，拜托。 :)

以上是关于我是不是需要（或应该）将我所有的 Vue 组件包装在一个包装器组件中？的主要内容，如果未能解决你的问题，请参考以下文章

vue 包装另一个组件，传递道具和事件

如何从 vue-fullpage 包装器中的子组件调用 fullpagejs 方法？

Vue渲染功能：在没有包装器的情况下将插槽包含到子组件中

应该是啥组件？

win7nodejs版本 13.14.0安装开发vue所有需要的组件，并顺带解决'vue-cli-service' 不是内部或外部命令的问题