组件（Component）是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素，封装可重用的代码。
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：
目标
/* 知道组件化开发思想 知道组件的注册方式 说出组件间的数据交互方式 说出组件插槽的用法 说出Vue调试工具的用法 基于组件的方式实现业务功能 */ 组件化开发思想 /* 标准 分治 重用 组合 组件化规范: Web Components 希望尽可能多的重用代码 自定义组件的方式不太容易(html,css和js) 多次使用组件可能冲突 Web Components通过创建封装好功能的定制元素解决上述问题. */ 全局组件语法
// 定义组件 Vue.component(组件名称, { data: 组件数据 template: 组件模板内容 }) // 组件用法 <div> <button-counter></button-counter> </div>Example1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div> <button-counter>点击</button-counter> </div> <script type="text/javascript" src="http://www.likecs.com/js/vue.js"></script> <script type="text/javascript"> /* 组件注册 */ Vue.component('button-counter', { data: function() { return { count: 0 } }, template: ` <div> <button @click="handle">点击了{{ count }}次</button> <button>测试</div> </div> `, methods: { handle: function() { this.count += 2 } } }) var vm = new Vue({ el: '#app', data: { }, methods: { } }) </script> </body> </html>所有实例都能使用全局组件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta content=""> <meta content=""> <link href=""> <script type="text/javascript" src="http://www.likecs.com/lib/vue.js"></script> <style> .navbar{ background: red; } </style> </head> <body> <div> <navbar></navbar> <navbar></navbar> </div> <script type="text/javascript"> // 1. 全局定义组件(作用域隔离) Vue.component("navbar", { template: ` <div> <button @click="handleback()">返回</button> navbar <button>主页</button> </div>`, methods: { handleback() { console.log("back") } } }) new Vue({ el: "#box" }) </script> </body> </html> 局部组件我们可以在实力选项中注册局部组件,这样组件只能在这个实例中使用
定义局部组件
/* var ComponentA = { ... } var ComponentB = { ... } var ComponentC = { ... } new Vue({ el: '#app' components { 'component-a': ComponentA, 'component-b': ComponentB, 'component-c': ComponentC, } }) */Example1
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta content=""> <meta content=""> <link href=""> <script type="text/javascript" src="http://www.likecs.com/lib/vue.js"></script> <style> .navbar{ background: red; } </style> </head> <body> <div> <navbar></navbar> <navbar></navbar> <sidebar></sidebar> </div> <script type="text/javascript"> // 1. 全局定义组件(作用域隔离) Vue.component("navbar", { template: ` <div> <button @click="handleback()">返回</button> navbar <button>主页</button> <child></child> <navbarchild></navbarchild> </div>`, methods: { handleback() { console.log("back") } }, // 局部定义组件 components: { navbarchild: { template: ` <div> navbarchild-只能在navbar组件中使用 </div> ` } } }) Vue.component("child", { template: `<div>child组件-全局定义</div>` }) Vue.component("sidebar", { template: ` <div> sider组件 <child></child> </div> ` }) new Vue({ el: "#box" }) // root component </script> </body> </html>Example2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div> <hello-world></hello-world> <hello-tom></hello-tom> <hello-jerry></hello-jerry> <test-com></test-com> </div> <script type="text/javascript" src="http://www.likecs.com/js/vue.js"></script> <script type="text/javascript"> /* 局部组件注册 局部组件只能在注册他的父组件中使用 */ Vue.component('test-com', { template: '<div>Test<hello-world></hello-world></div>' }); var HelloWorld = { data: function() { return { msg: 'HelloWorld' } }, template: '<div>{{msg}}</div>' }; var HelloTom = { data: function() { return { msg: 'HelloTom' } }, template: '<div>{{msg}}</div>' }; var HelloJerry = { data: function() { return { msg: 'HelloJerry' } }, template: '<div>{{msg}}</div>' }; var vm = new Vue({ el: '#app', data: { }, components: { 'hello-world': HelloWorld, 'hello-tom': HelloTom, 'hello-jerry': HelloJerry } }); </script> </body> </html> 组件注意事项 /* 1. data必须是一个函数 分析函数与普通对象的对比 2. 组件模板内容必须是单个跟元素 分析演示实际的效果 3. 组件模板内容可以是模板字符串 模板字符串需要浏览器提供支持(ES6语法) */ 组件命名方式 /* 短横线方式 Vue.component('my-component',{ ... }) 驼峰方式 Vue.component('MyComponent',( ... )) */