vue为啥要求组件模板只能有一个根元素

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue为啥要求组件模板只能有一个根元素相关的知识，希望对你有一定的参考价值。

参考技术A 1.new Vue(el:'#app')

2.单文件组件中，template下的元素div

一、当我们实例化Vue的时候，填写一个el选项，来指定我们的SPA入口：

同时我们也会在body里面新增一个id为app的div

这很好理解，就是为vue开启一个入口，那我们不妨来想想，如果我在body下这样

Vue其实并不知道哪一个才是我们的入口，因为对于一个入口来讲，这个入口就是一个‘Vue类'，Vue需要把这个入口里面的所有东西拿来渲染，处理，最后再重新插入到dom中。

如果同时设置了多个入口，那么vue就不知道哪一个才是这个‘类'。

二、当我们在webpack搭建的vue开发环境下，使用单文件组件时，你可能会这样：

那这里为什么template下也必须有且只能有一个div呢？

这里我们要先看一看template这个标签，这个标签是html5出来的新标签，它有三个特性：

1.隐藏性：该标签不会显示在页面的任何地方，即便里面有多少内容，它永远都是隐藏的状态；

2.任意性：该标签可以写在页面的任何地方，甚至是head、body、sciprt标签内；

3.无效性：该标签里的任何HTML内容都是无效的，不会起任何作用；

但是呢，你可以通过innerHTML来获取到里面的内容。

知道了这个，我们再来看.vue的单文件组件。其实本质上，一个单文件组件，本质上（我认为）会被各种各样的loader处理成为.js文件（因为当你import一个单文件组件并打印出来的时候，是一个vue实例），通过template的任意性我们知道，template包裹的HTML可以写在任何地方，那么对于一个.vue来讲，这个template里面的内容就是会被vue处理为虚拟dom并渲染的内容，导致结果又回到了开始 ：既然一个.vue单文件组件是一个vue实例，那么这个实例的入口在哪里？

如果在template下有多个div，那么该如何指定这个vue实例的根入口？

为了让组件能够正常的生成一个vue实例，那么这个div会被自然的处理成程序的入口。

通过这个‘根节点'，来递归遍历整个vue‘树'下的所有节点，并处理为vdom，最后再渲染成真正的HTML，插入在正确的位置

那么这个入口，就是这个树的‘根'，各个子元素，子组件，就是这个树的‘枝叶'，而自然而然地，这棵‘树'，就是指一个vue实例了。

Vue组件

VUE组件

组件

  • 每一个组件都是一个vue实例
  • 每个组件均具有自身的模板template，根组件的模板就是挂载点
  • 每个组件模板只能拥有一个根标签
  • 子组件的数据具有作用域，以达到组件的复用

vue组件

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app">
        {{ msg }}
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    /**
     * 1、组件：由html、css、js三部分组成的独立单位，可以类似于变量，重复使用
     * 2、组件其实就是vue实例(对象)，一个组件就是一个vue实例(对象)
     * 3、new Vue()产生的也是实例(对象)，所以也是组件，我们称之为 根组件
     *      一个页面建议只出现一个根组件（项目开发模式下，一个项目建议只出现一个根组件）
     * 4、组件的html页面结构有 template 实例成员提供
     *      template提供的html结构是用来构虚拟DOM
     *      真实DOM最终会被虚拟DOM替换
     *      根组件一般不提供template，就由挂载点el来提供构建虚拟DOM的页面结构，根组件如果提供了template，还需要设置挂载点作为替换占位
     *      template模板有且只有一个根标签
     */
    let c1 = '';
    new Vue({
        el: '#app',
        data: {
            msg: '12345',
            c1: 'red'
        },
        template: `
        <div id="app">
            <p :style="{color: c1}">{{ msg }}</p>
            <p @click="clickAction">{{ msg }}</p>
        </div>
        `,
        methods: {
            clickAction() {
                console.log(this.msg)
            }
        }
    })
</script>
</html>

子组件

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>子组件</title>
</head>
<body>
    <!--根组件的template-->
    <div id="app">
        <!--在根组件template中加载的组件，称之为根组件的子组件-->
        <my-tag></my-tag>
        <my-tag></my-tag>
        <my-tag></my-tag>

        <tag></tag>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    // 1、定义组件
    // 2、注册组件
    // 3、使用组件

    // 如何定义子组件：组件就是一个普通对象，内部采用vue语法结构，被vue注册解释后，就会成为vue组件
    let myTag = {
        template: `
        <div>
            <h3>子组件</h3>
            <p>我是自定义的子组件</p>
        </div>
        `,
    };

    // 了解：全局组件，不要注册就可以直接使用
    Vue.component('tag', {
        template: `
        <div>
            <h3>全局组件</h3>
            <p>我是自定义的全局组件</p>
        </div>
        `,
    });


    new Vue({
        el: '#app',
        components: {
            // 'my-tag': myTag,
            // myTag: myTag,
            myTag,
        }
    })
</script>
</html>

以上是关于vue为啥要求组件模板只能有一个根元素的主要内容，如果未能解决你的问题，请参考以下文章

为啥vue的template和react的render函数都只能有一个根元素

Vue组件中的问题

六十九Vue组件

04 Vue组件

Vue常见组件

Vue组件