VUE3.0,DAY36，组件嵌套

最新推荐文章于 2024-05-29 12:41:11 发布

疯子的梦想＠

最新推荐文章于 2024-05-29 12:41:11 发布

阅读量644

点赞数

分类专栏：前端文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_48681463/article/details/120138148

版权

前端专栏收录该内容

110 篇文章 4 订阅

订阅专栏

VUE3.0,DAY36

- - 组件嵌套
  - 案例分析

组件嵌套

一个父组件，又嵌套了两个子组件。蓝色框是父组件，橙色圈出的是子组件。
在这里插入图片描述

案例分析

我们需要定义一个父组件school，组件名叫zu_jian_1,在定义一个子组件student，组件名叫zu_jian_2。形成嵌套关系。由下图可以看到是发生了嵌套，zujian2嵌套在了zujian1中。
注意：定义组件时，要把子组件定义在前，父组件定义在后。

<!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>组件嵌套</title>
    <script type="text/javascript" src="../vue.js">
        Vue.config.productionTip = false
    </script>
</head>

<body>
    <div id="root">
        <!--编写组件标签,刚刚在vue中注册的-->
        <zu_jian_1></zu_jian_1>
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false
    //创建school组件，一定需要调用一个api，叫vue.extend,括号里边写配置项
    //创建student组件
    const student = Vue.extend({
        template: `
        <div>
            <h2>学生姓名:{{studentName}}</h2>
            <h2>学生年龄:{{age}}</h2>
        </div> 
        `,
        data() {
            return {
                studentName: '呜呜',
                age: 18
            }
        },
    })
    const school = Vue.extend({
        //注意这里不要写vue实例中的el配置项，因为最终所有的组件都要被一个vm管理，
        //由vm决定服务于那个容器。
        //自定义组件时，data必须写成函数的形式，不要写data:{}对象形式
        //编写组件标签zu_jian_2,就写在这里，写在父组件的template下，
        //因为我们在vue中注册了组件zu_jian_1，那么zu_jian_1又包含zu_jian_2.
        //所以组件名标签的使用，即zu_jian_2标签，不写在body里的div里，要写在此处
        template: `
        <div>
            <h2>学校名称:{{schoolName}}</h2>
            <h2>学校地址:{{address}}</h2>
            <hr>
            <zu_jian_2></zu_jian_2>
        </div> 
        `,
        data() {
            return {
                schoolName: '哈哈',
                address: '123',
            }
        },
        //在父组件里注册组件2，那么school就是父组件，student就是子组件了。
        components: {
            zu_jian_2:student
        }
    })

    new Vue({
        el: "#root",
        //components就是组件们的意思,这里组件注册完毕（局部注册）
        components: {
            zu_jian_1: school,
        }
    })
</script>

</html>

在这里插入图片描述

疯子的梦想＠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE3.0,DAY36，组件嵌套

VUE3.0,DAY36组件嵌套案例分析组件嵌套一个父组件，又嵌套了两个子组件。蓝色框是父组件，橙色圈出的是子组件。案例分析我们需要定义一个父组件school，组件名叫zu_jian_1,在定义一个子组件student，组件名叫zu_jian_2。形成嵌套关系。由下图可以看到是发生了嵌套，zujian2嵌套在了zujian1中。注意：定义组件时，要把子组件定义在前，父组件定义在后。<!DOCTYPE html><html lang="en"><head&gt
复制链接

扫一扫