Vue组件不渲染的奇葩问题

爱喝可乐de妖怪

已于 2023-12-07 16:27:03 修改

阅读量126

点赞数

文章标签： vue 前端框架前端 react

于 2023-12-05 15:04:12 首次发布

本文链接：https://blog.csdn.net/m0_59183852/article/details/134807399

版权

作者在学习Vue过程中遇到一个问题，即自闭合的`my-company`组件遮挡了非自闭合的`my-employee`组件的渲染。文章解释了问题的原因并提供了解决方法：确保所有组件不是自闭合的，以避免渲染问题。作者建议在项目中使用非自闭合组件形式，以免与React习惯冲突。

摘要由CSDN通过智能技术生成

最近重新捡起了Vue这个高级的东西，学习过程中碰到了一个很奇怪的问题，在此值得记录一下。

原来的代码是这样子的：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="root">
        <my-company />
        <hr>
        <my-employee></my-employee>
    </div>
    <script>
        Vue.config.productionTip = false

        /* 创建company组件 */
        const company = Vue.extend({
            template: `
                <div>
                    <h3>公司名称：{{companyName}}</h3>
                    <h3>公司地址：{{address}}</h3>    
                </div>
            `,
            data() {
                return {
                    companyName: '杭州量安科技',
                    address: '中电海康集团',
                }
            },
        })
        /* 创建员工组件 */
        const employee = Vue.extend({
            template: `
                <div>
                    <h3>员工姓名：{{employeeName}}</h3>
                    <h3>员工年龄：{{age}}</h3>
                </div>
            `,
            data() {
                return {
                    employeeName: 'Emma',
                    age: 30
                }
            },
        })

        /* 创建vm */
        new Vue({
            el: '#root',
            /* 注册组件（局部注册） */
            components: {
                'my-company': company,
                'my-employee': employee,
            }
        })
    </script>
</body>

</html>

运行之后只出现上面那个company组件，下面这个employee组件不显示，如下图所示：

后来经过盘查喝继续学习，找到了原因。

从上面的代码可知，my-company 和 my-employee 组件都被正确地注册和使用了，所以理论上它们都应该被渲染出来。但是，我的 my-company 组件是自闭合的，而 my-employee 组件则不是。在 Vue.js 中，不是所有的环境都支持自闭合组件。如果我的环境不支持自闭合组件，那么 my-employee 组件可能会被视为 my-company 组件的内容，从而导致它没有被正确地渲染。

当我将my-company 组件改为非自闭合后，问题迎刃而解。

结果如下图所示：