vue全局组件和局部组件
Vue.js的组件化思想 —— 上
一、Vue中的组件
- Vue视图层的灵魂 —— 组件化
vuea7.png
组件（Component）是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素，封装可重用的代码。
在较高层面上，组件是自定义元素， Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。
- 全局组件的创建和注册
vuea11.png
-
案例代码：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <my-component></my-component> </div> <script src="js/vue.js"></script> <script> // 1. 创建组件构造器 var Profile = Vue.extend({ template: '<h1>我是自定义组件</h1>' }); // 2. 注册组件, 指定组件的名称 Vue.component('my-component', Profile); new Vue({ el: '#app' }) </script> </body> </html>
调用Vue.extend()创建的是一个组件构造器，构造器有一个选项对象，选项对象的template属性用于定义组件要渲染的HTML；
调用Vue.component()注册组件时，需要提供2个参数：组件的标签名 和 组件构造器；注册的组件要挂载到某个Vue实例下，否则它不会生效；
Vue.extend() 和 Vue.component()：由于 Vue 本身是一个构造函数，Vue.extend() 是一个类继承方法，它用来创建一个 Vue 的子类并返回其构造函数。
而Vue.component() 的作用在于：建立指定的构造函数与 ID 字符串间的关系，从而让 Vue.js 能在模板中使用它；直接向 Vue.component() 传递 options 时，它会在内部调用 Vue.extend()。
- 局部组件的创建和注册
-
案例代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册局部组件</title> </head> <body> <div id="root"> <my-component></my-component> </div> <div id="root2"> <my-component></my-component> </div> <script src="js/vue.js"></script> <script> // 1. 创建组件构造器 var Profile = Vue.extend({ template: '<li>创建局部组件!</li>' }) new Vue({ el: '#root', components: { 'my-component': Profile } }) new Vue({ el: '#root2' }) </script> </body> </html>
-
- 另一种组件创建和注册方式
-
直接通过Vue.component注册或获取全局组件，主要体现在以下几种方式：
// 注册组件，传入一个扩展过的构造器 Vue.component('my-component', Vue.extend({ /* ... */ })) // 注册组件，传入一个选项对象（自动调用 Vue.extend） Vue.component('my-component', { /* ... */ }) // 获取注册的组件（始终返回构造器） var MyComponent = Vue.component('my-component') -
自定义全局组件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <my-component></my-component> </div> <script src="js/vue.js"></script> <script> Vue.component('my-component', { template: '<h1>自定义全局组件</h1>' }) new Vue({ el:'#app' }) </script> </body> </html> -
自定义局部组件
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <my-component1></my-component1> <my-component2></my-component2> </div> <script src="js/vue.js"></script> <script> var app = new Vue({ el: '#app', components: { 'my-component1': { template: '<h1>局部组件1!</h1>' }, 'my-component2': { template: '<h2>局部组件2!</h2>' } } }) </script> </body> </html>
-
