最近开始学习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就是父组件那我也没话说了
小声bb:总觉得哪里不对劲,可是又说不上来… 2020/10/29更: 经过长达数星期的学习(磨洋工),基本明白了父子组件指的啥了: 父组件指的就是对应子组件的外层容器(包括<组件名></组件名>),如:
**
**
欢迎评论区指点小弟噢