初学VUE对全局局部组件、父子组件的一些理解

    科技2022-07-11  124

    初学VUE对全局/局部组件、父子组件的一些理解

    前言

    最近开始学习vue的知识了,然后可能是看得太快导致一些基本概念啥的没有理解,其中有两个问题就是对全局/局部组件的作用域不太清晰,然后就是父子组件的概念。这里就来分享一下拙见。

    一、全局/局部组件

    顾名思义,全局组件就是全局可以使用的组件。但是所谓的“全局”指的是全部vue实例作用域,简单讲就是挂载了vue实例的*标签(div)*如

    <div id="app">**作用域**</div>` <scirpt>var app = new Vue({ el:'#app', ``````````})</script>

    而局部组件只有在被实例中创建了组件的实例挂载的div(或其它标签)中才能使用

    先看两种组件的创建方法

    全局组件创建方法:

    Vue.component('component_1', { template:' <div><b>全局组件</b></div>' });

    局部组件创建方法:

    var my_component = { template: '<div>局部组件</div>' }; var app = new Vue({ el: '#app', components: { 'component_2': my_component } })

    然后看演示效果:

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue_components</title> </head> <body> <div id="app"> <p>挂载了vue实例的app:</p> <component_1></component_1> <component_2></component_2> <hr/> </div> <div ><!-- 没有挂载实例所以组件没用 --> <p>没有挂载任何实例:</p> <component_1></component_1> <component_2></component_2> <hr/> </div> <div id="abb"><!-- 挂载了abb实例,但abb实例中没有创建局部组件component_2 --> <p>挂载了abb实例,但abb实例中没有创建局部组件component_2:</p> <component_1></component_1> <!-- component_2组件没用 --> <component_2></component_2> </div> <script src="./vue2.6.12.js"> </script> <script> Vue.component('component_1', { template:' <div><b>全局组件</b></div>' }); var my_component = { template: '<div>局部组件</div>' }; var app = new Vue({ el: '#app', components: { 'component_2': my_component } }); var abb = new Vue({ el: '#abb', }) </script> </body> </html>

    看了以上内容应该就大致明白了全局/局部组件的作用域了

    二、父子组件

    看了csdn里面的两篇博客,说的关于父子组件具体指什么都不一样,这里我只表达一下我的理解哈。讲之前先了解一下props属性: 组件不仅仅是要把模板的内容进行复用,更重要的是组件之间要进行通信。通常父组件的模板中包涵子组件,父组件要正向的向子组件传递数据或参数,子组件接收到后根据参数的不同来渲染不同的内容或执行操作。这个正向传递数据的过程就是通过props来实现的。 ————摘抄自《vue.js实战》(梁灏) 通过这段话大概就可以知道父子组件分别是什么了,为了加深理解,贴一段书上的代码:

    <div id="aaa"> <my-component message="来自父组件的数据"></my-component> </div> <script> Vue.component('my-component',{ props:['message'], template:'<div>{{message}}</div>' }); var app = new Vue({ el:'#aaa', }) </script>

    渲染结果为:

    <div id="aaa"> <div>来自父组件的数据</div> </div>

    很明显,massage的数据是谁给的?应该是my-component给的吧。当然,如果说因为vue数据双向绑定的特性导致这个massage赋值随便谁给都一样所以不能说明my-componen就是父组件那我也没话说了

    结论:可以理解为父组件就是组件名吧,子组件就是template里面的内容。

    小声bb:总觉得哪里不对劲,可是又说不上来… 2020/10/29更: 经过长达数星期的学习(磨洋工),基本明白了父子组件指的啥了: 父组件指的就是对应子组件的外层容器(包括<组件名></组件名>),如:

    **

    直白点讲就是,子组件是你看不到的部分,等着浏览器根据(父组件给的)数据结合子组件模板渲染,而父组件就是对应子组件的外层标签,包括子组件的标签!也就是你写的代码的可见部分

    **

    欢迎评论区指点小弟噢

    Processed: 0.008, SQL: 8