Vue 组件的嵌套

组件的嵌套就是在一个组件中注册另一个组件

简单的组件嵌套

在 school 组件中注册 student 组件

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件的嵌套</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>

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

</body>

<script type="text/javascript">

    // 创建组件 student
    const student = Vue.extend({
        template: `
            <div>
                <h3>学生姓名：{{name}}</h3>
                <h3>学校年龄：{{age}}</h3>
            </div>
        `,
        data() {
            return {
                name: '张三',
                age: 18,
            }
        }
    })

    // 创建组件 school
    const school = Vue.extend({

        template: `
            <div>
                <h3>学校名称：{{schoolName}}</h3>
                <h3>学校地址：{{address}}</h3>
                <hr>
                <student></student>
            </div>
        `,
        data() {
            return {
                schoolName: 'ABC',
                address: '长沙',
            }
        },
        components: {
            // 注册组件 student
            student
        }
    })

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

app 组件

在 Vue 中使用 app 组件来管理所有的组件

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件的嵌套</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>

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

</body>

<script type="text/javascript">

    // 创建组件 student
    const student = Vue.extend({
        template: `
            <div>
                <h3>学生姓名：{{name}}</h3>
                <h3>学校年龄：{{age}}</h3>
            </div>
        `,
        data() {
            return {
                name: '张三',
                age: 18,
            }
        }
    })

    // 创建组件 school
    const school = Vue.extend({
        template: `
            <div>
                <h3>学校名称：{{schoolName}}</h3>
                <h3>学校地址：{{address}}</h3>
                <hr>
                <student></student>
            </div>
        `,
        data() {
            return {
                schoolName: 'ABC',
                address: '长沙',
            }
        },
        components: {
            student
        }
    })

    // 创建组件 hello
    const hello = Vue.extend({
        template: `<h2>{{msg}}</h2>`,
        data() {
            return {
                msg: '你好'
            }
        }
    })

    // 创建组件 app
    const app = Vue.extend({
        template:`
        <div>
            <hello></hello>
            <hr>
            <school></school>
        </div>
        `,
        components:{
            school,
            hello
        }
    })

    new Vue({
        template:`<app></app>`,
        el: '#root',
        // 注册组件（局部）
        components: {app}
    })
</script>
</html>

posted @ 2022-04-25 09:58 春暖花开鸟阅读(690) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· VueComponent

· Vue 非单文件组件的基本使用

· Vue组件

· Vue.js 非单文件组件-组件的嵌套

· Vue组件的各种方式

阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球运作规律