Vue之组件嵌套 – 源码巴士

简介

主要讲解组件时如何嵌套的。
组件嵌套类似于一个组件里面注册了另外一个组件，存在父子关系
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件嵌套</title>
</head>
<body>
    <div id="root">
        <school></school>
    </div>

    
    
</body>
    <script src="./js/vue.js"></script>
    <script>
        Vue.config.productionTip = false;


        const student = Vue.extend({
            template:`
            <div>
            <div>学生:{{studentName}}</div>
            <div>年龄:{{studentAge}}</div>
            </div>
            `,
            data() {
               return {
                studentName:"张三",
                studentAge:18
               }
           },
        });

         //这里是第一步，创建组件，使用Vue.extend函数进行创建，传入一个配置对象
        // 创建组件有一个注意点是传入的配置对象不能配置el配置项，因为组件时不属于谁的，到时使用时确定在哪使用。
        // 创建组件第二个注意点是，data数据必须写成函数的形式，并且函数返回一个对象。
        const school = {
            //配置组件使用的模板，需要用一个div套在外面，确保只有一个根元素。
            //这里就封装了组件的html。
           template:`
           <div>
           <div>学校：{{schoolName}}</div>
           <div>地址：{{schoolAddress}}</div>
           <hr>
           <!-- 嵌套组件的使用只能在父组件的template选项使用 -->
           <student></student>
           </div>
           `,
           //配置数据
           data() {
               return {
                schoolName:"尚硅谷",
                schoolAddress:"北京"
               }
           },
           //school组件里面嵌套了studen组件
           components:{
               student:student
           }
        };
    

        new Vue({
            el:"#root",
            components:{
                school:school
            }
        })
    </script>
</html>

效果：
在这里插入图片描述

原文链接：https://blog.csdn.net/qq_40837310/article/details/122914370