学习笔记-vue2.x-组件

一. vue.js 组件

组件化

　　组件化：vue的一个重要概念，主张将庞杂的页面拆分成一个个小模块，每个模块实现独立的功能。

　　　　 vue组件即上述概念中的模块，使用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面

都可以抽象为一个组件树

　　组件：本质上是一个具有预定义选项的、可重复使用的vue实例，组件名是独一无二的。

　　组件的作用：组件用于扩展HTML元素(作为自定义的HTML标签使用),封装可重用的代码。

组件使用

 1 
 2 
 3     
 4         
 5         组件基础
 6         
 7     
 8     
 9          
10             {{message}}                       
11              
12         
13         
30     
31

全局注册和局部注册

　　为了能在模板中使用，组件必须先注册以便 Vue 能够识别。这里有两种组件的注册类型：全局注册和局部注册。

　　全局注册：

　　　　通过 Vue.component 全局注册

1 Vue.component('my-component-name', {
2   // ... 选项 ...
3 })

　　局部注册：

　　　　通过一个普通的 JavaScript 对象定义组件

1 var ComponentA = { /* ... */ }
2 var ComponentB = { /* ... */ }

　　　　在components 选项中注册你想要使用的组件

1 new Vue({
2   el: '#app',
3   components: {
4     'component-a': ComponentA,
5     'component-b': ComponentB
6   }
7 })

二.父子组件

三.传参机制

四.参考资料

https://www.runoob.com/vue2/vue-component.html

　　https://cn.vuejs.org/v2/guide/components.html

new Vue({ el: '#components-demo' })

学习笔记-vue2.x-组件

相关

标签