Vue之组件嵌套

最新推荐文章于 2024-06-18 22:34:12 发布

我会努力变强的

最新推荐文章于 2024-06-18 22:34:12 发布

阅读量1.5k

点赞数 1

分类专栏： JavaScript 文章标签： vue.js 前端 javascript

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

版权

JavaScript 专栏收录该内容

38 篇文章 8 订阅

订阅专栏

简介

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

<!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
评论
Vue之组件嵌套

简介主要讲解组件时如何嵌套的。组件嵌套类似于一个组件里面注册了另外一个组件，存在父子关系<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>组件嵌套</title></head><body> <div id="root"> <school></s
复制链接

扫一扫