Vue简单组件嵌套

最新推荐文章于 2024-03-20 11:44:00 发布

白云好懒

最新推荐文章于 2024-03-20 11:44:00 发布

阅读量884

点赞数

分类专栏：前端学习 vue学习文章标签： vue

本文链接：https://blog.csdn.net/loveforlongtime/article/details/124201842

版权

前端学习同时被 2 个专栏收录

16 篇文章 1 订阅

订阅专栏

vue学习

1 篇文章 0 订阅

订阅专栏

组件定义：实现应用中局部功能代码和资源的集合。

分类：非单文件组件，单文件组件

vue使用组件的三大步骤
一、定义组件（创建组件）
二、注册组件
三、使用组件（写组件标签）

注意区别模块化，简单说模块就是一个js文件，而组件是代码集合（html/css/js）。

下面我们简单写一些组件

<body>
    <div id="root"></div>    // 写一个容器  交给vue管理

    <script type="text/javascript">
        const hello = Vue.extend({             // 定义一个hello组件
            template: `  <div>
                <h3>hello 小贵</h3>

                
                </div>`,

        })

        const student = Vue.extend({         // 定义一个student组件  下面嵌套进school组件
            template: `<div>
                <h2>学生姓名：{{sName}}</h2>
                <h2>学生年龄：{{age}}</h2>
                
                </div>`,
            data() {
                return {
                    sName: '小贵',
                    age: 22,
                }
            },
        })

        const school = Vue.extend({         // 定义一个school组件

            template: `  <div>
                       <h2>学习名称：{{schoolName}}</h2>
                       <h2>学习名称：{{address}}</h2>
                       <student></student>
                     </div>`,
            data() {
                return {
                    schoolName: '门头沟学院',
                    address: '北京'

                }
            },
            components: {                             //基本组件嵌套
                student                  //学生组件嵌套进学校组件

            }
        })
        // Vue.component('school',school)         //全局注册 
        const app = Vue.extend({                     //这个app组件作为所有组件的管理者  所有组件写在这里
            template: ` <div>                //其他组件以组件标签写给他
              <school></school>
               <hello></hello>                     //放两个注意给一个根节点包住他们
          </div>                
            `,
            components: {
                school,                //注册组件
                hello
            }

        })

        const vm = new Vue({
            el: '#root',
            // components: {        //局部注册
            //     school: school,
            //     student: student,
            //     hello:hello
            // }
            template: `
         
                <app></app>  //最后把app这个组件写在这里，这样所有的内容我们都交给vue管理了
            `,
            components: {
                app: app


            }
        })
    </script>
</body>