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>

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

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值