鱿鱼须的嵌套组件

最新推荐文章于 2024-09-14 17:32:32 发布

键盘日记

最新推荐文章于 2024-09-14 17:32:32 发布

阅读量205

点赞数

文章标签： vscode javascript

本文链接：https://blog.csdn.net/m0_58820668/article/details/125377126

版权

话不多说，嵌套组件就是组件的套娃，比俄罗斯套娃还能套，想怎么套就这么套。嵌套组件的优势在于可以通过vue管理工具很快地查看组件的层级，比如下面学校组件式包含学生组件的。

步骤：一个就是在声明两个组件之后，将子组件注册到父组件中，然后再在父组件的template——也就是样式结构中用标签使用，然后父组件要在VM注册，最后在页面上（body）插值语法插入父组件即可。


    <!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 src="../xxx.js/vue.js"></script>
    </head>

    <body>
        <div id="root">
            <school></school>


        </div>
    </body>

    <script>
        const student = Vue.extend({
        template: `
    <div>
        <h2>学生姓名：{{ studentName }}</h2>
            <h2>学生年龄：{{ age }}</h2> 
    </div>`,
    // el:'#root',
         data() {
            return {
                studentName: '佩奇',
                age: 3
            }
        }
    })


        //定义school组件
        const school = Vue.extend({
        template: `
    <div>
        <h2>学校名称：{{ schoolName }}</h2>
        <h2>学校地址：{{ address }}</h2>   
        <student></student>
    </div>`,
    // el:'#root',
         data() {
            return {
                schoolName: '广东老公学院',
                address: '肇庆',
            }
        },
        components:{
            student
        }
    })


    new Vue({
        el: '#root',
        //2、注册组件
        components: {
            school,
        }
    })
    </script>