清晰理解什么是子组件和父组件之间的关系

最新推荐文章于 2021-01-29 01:00:38 发布

weixin_40551017

最新推荐文章于 2021-01-29 01:00:38 发布

阅读量1k

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_40551017/article/details/107094414

版权

vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue/vue.js"></script>
</head>

<body>
    <div id="app">
     	<!--这里面渲染出来就有child和child2，它在child中 -->
        <chd></chd>
        <!-- 挂到根组件后，这里可以单独渲染child2 -->
        <chd2></chd2>
    </div>
    <script>
        //从根组件往上看，我们的思路就很清晰了，根组件挂载了child子组件，child子组件
        //又挂载了child2组件，所以child2组件就是child的子组件，也就是根组件的  “孙组件”
        //当然没有孙组件的说法。
        //而当我们把child2组件添加进child的模板中时，我们就在渲染child组件时也同时渲染了child2
        //组件。而反过来，当我们只想在页面渲染出child2组件而不想让和child一起被渲染时，
        // 我们就需要把child2组件也挂载到根组件

        //注意，后来我们都不用extend来注册组件了，而直接用了语法糖Vue.component("组件名",{配置选项}),
        //这样的语法来声明， 大括号内写的也就是extend后面大括号内的语法，所以道理是一样
        const child2 = Vue.extend({
            template: `
                <div>
                    <h2>我也是子组件，哈哈哈</h2>
                    <h2>但是我挂载了我大哥child上，所以我是我大哥的子组件，哈哈</h2>
                </div>  
            `
        })

        const child = Vue.extend({
            template: `
                <div>
                    <h2>我是子组件，哈哈哈</h2>
                    <h2>我通过extend构造器创建</h2>
                    <chd2></chd2>
                </div>  
            `,
            //将child2挂载在这child上，那此时，对于child2来说，child就是他的父组件了，
            //而在上面的template模板中，我们将挂载在child中的child2写进模板，
            //那么此时，我们要渲染child2，也会同时把child渲染出来
            components: {
                chd2: child2
            }
        })

        //new vue注册根组件
        const app = new Vue({
            el: '#app',
            data: {

            },
            components: {
                //const child子组件挂载在了根组件上， 所以他是根组件的子组件
                chd: child,
                //当我们把child2也挂载到根组件时，我们就可以在标签中直接渲染child2，结果如图
                chd2: child2 
            }
        })
    </script>
</body>

</html>

页面显示
在这里插入图片描述
vue 调试工具中显示的结构也是一样的

weixin_40551017

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
清晰理解什么是子组件和父组件之间的关系

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="vue/vue.js"></scr
复制链接

扫一扫