Vue基础(23)_Vue组件的嵌套

上一节组件知识补充：

组件名和中转变量名一样，可简写。

javascript 复制代码

            components: {
                student1:student1,
                student2:student2
            }

javascript 复制代码

            // 组件名和中转变量名一样，可简写。
            components: {
                student1,
                student2
            }

组件的嵌套注意事项：

1、子组件标签，只能在所归属的父组件内使用。

2、标准化开发，遵循组件的嵌套原则，统一使用app来管理所有组件。

代码演示：

html 复制代码

<!DOCTYPE html>
<html lang="zh">

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

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

    <script>
        // 创建school子组件：student1组件，中转变量名为：student1。
        const student1 = Vue.extend({
            template: `
                <div>
                    <h3>学生姓名：{{studentName}}</h3>
                    <h3>学生年龄：{{age}}</h3>
                </div>
            `,
            data() {
                return {
                    studentName: '张三',
                    age: 18
                }
            },
        })

        // 创建创建school子组件：student2组件，中转变量名为：student2。
        const student2 = ({
            template: `
                <div>
                    <h3>学生姓名：{{studentName}}</h3>
                    <h3>学生年龄：{{age}}</h3>
                </div>
            `,
            data() {
                return {
                    studentName: '李四',
                    age: 20
                }
            },
        });

        // 第一步：创建school组件，中转变量名为：school。
        const school = Vue.extend({
            // 开发者工具优先呈现name配置项
            name: 'JXshifan',
            // 子组件标签，只能在所归属的父组件内使用。
            template: `
                <div>       
                    <h3>学校名称：{{schoolName}}</h3>
                    <h3>学校地址：{{address}}</h3>
                    <button @click = "showName">点我提示学校名</button>
                    <hr>
                    <student1></student1>
                    <student2></student2>
                </div>
            `,
            data() {
                return {
                    schoolName: '江西师范大学',
                    address: '江西省南昌市紫阳大道99号'
                }
            },
            methods: {
                showName() {
                    alert(this.schoolName);
                }
            },
            // 注册student1、student2为school的子组件
            // 组件名和中转变量名一样，可简写。
            components: {
                student1,
                student2
            }
        })

        // 第二步：注册全局组件。属性名：组件名。属性值：中转变量名。
        Vue.component("school", school);

        const app = Vue.extend({
            template: `
                <div> 
                    <h2 style="color: chocolate;">{{message}}</h2>
                    <!-- 第三步：编写组件标签 -->
                    <school></school>
                </div>
            `,
            data() {
                return {
                    message: '根目录：root1'
                }
            },
            components: {
                school
            }
        })

        new Vue({
            el: '#root',
            template: `
                <app></app>
            `,
            // 第二步：注册局部组件。属性名：组件名。属性值：中转变量名。
            components: {
                app
            }
        })

    </script>
</body>

</html>