vue--组件嵌套

最新推荐文章于 2023-08-11 09:44:00 发布

誰言秋桜

最新推荐文章于 2023-08-11 09:44:00 发布

阅读量131

点赞数

分类专栏：学习笔记文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_64948861/article/details/129203329

版权

学习笔记专栏收录该内容

31 篇文章 0 订阅

订阅专栏

一、组件嵌套：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
    <!-- <app></app>-->
    </div>
</body>
<script>

        //定义student组件，嵌套在school里面，需要写在school前面
        const student = Vue.extend({
        name:'student  ',
        template:`
        <div>
            <h2>学生名称:{{name}}</h2>
            <h2>年龄:{{age}}</h2>
            </div>
        `,
        data() {
            return {
                name:'天堂',
                age:19
            }
        },
    })
   
    //定义school组件
    const school = Vue.extend({
        name:'school',
        template:`
        <div>
            <h2>学校名称:{{name}}</h2>
            <h2>学校地址:{{address}}</h2>
            <student></student>
            </div>
        `,
        data() {
            return {
                name:'天堂',
                address:'长沙'
            }
        },
        //注册组件（局部）
        components:{
            student  //注册在shool里面的组件需要写在school前面
        }
    })
      //定义一个hello组件
      const hello = Vue.extend({
        template:`
        <h2>{{msg}}</h2>
        `,
        data() {
            return {
                msg:'欢迎来到长沙'
            }
        },
      })
    //定义一个app组件   管理所有平级的组件，嵌套组件不算
    const app = Vue.extend({
        template:`
        <div>
            <hello></hello>
           <school></school>
        </div>`,
        components:{
            school,
            hello
        }
    })
    //创建vm
    new Vue({
        template:` <app></app>`,
        el:'#root',
        //注册组件（局部）
        components:{
            app
        }
    })
</script>
</html>

二、VueComponent

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <hello></hello>
        <school></school>
        
    </div>


    <script>
   //定义school组件
   const school = Vue.extend({
        name:'school',
        template:`
        <div>
            <h2>学校名称:{{name}}</h2>
            <h2>学校地址:{{address}}</h2>
            <button @click="sahnName">点击提示学校名称</button>
            </div>
        `,
        data() {
            return {
                name:'天堂',
                address:'长沙'
            }
        },
        methods: {
            sahnName(){
                console.log('sahnName',this);
            }
        },
    })
//定义test组件
    const test = Vue.extend({
        template:`<h2>{{name}}</h2>`,
        data() {
            return {
                name:'天下'
            }
        },
    })
    //定义hello组件
    const hello = Vue.extend({
        template:`
        <div>
            <h2>{{msg}}</h2>
            <test></test>
            </div>`,
        data() {
            return {
                msg:'你好阿！！！'
            }
        },
        components:{
            test 
        }
    })
  
 
    //  console.log('@',school === hello);  验证方法
  //console.log('@',school);
  //  console.log('#',hello);

        //创建vm
        new Vue({
        el:'#root',
        //注册组件（局部）
        components:{
            school,
            hello
        }
    })
    </script>
</body>
</html>