14_组件化开发
组件 (Component) 是 Vue.js 最强大的功能之一；
组件可以扩展 HTML 元素，封装可重用的代码；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <!-- 2、 组件使用 组件名称 是以HTML标签的形式使用 --> <button-counter></button-counter> <button-counter></button-counter> <button-counter></button-counter> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* 组件注册 */ // 1、 button-counter 就是组件中自定义的标签名 Vue.component('button-counter', { data: function () { return { count: 0 } }, template: '<button @click="handle">点击了{{count}}次</button>', methods: { handle: function () { this.count += 2; } } }) var vm = new Vue({ el: '#app', data: { } }); </script> </body> </html>
-
组件参数的data值必须是函数，同时这个函数要求返回一个对象;
-
组件模板必须是单个根元素;
-
组件模板的内容可以是模板字符串;
<div id="app"> <!-- 4、组件可以重复使用多次,因为data中返回的是一个对象所以每个组件中的数据是私有的,即每个实例可以维护一份被返回对象的独立的拷贝 --> <button-counter></button-counter> <button-counter></button-counter> <button-counter></button-counter> <!-- 8、必须使用短横线的方式使用组件 --> <hello-world></hello-world> </div> <script type="text/javascript"> //5 如果使用驼峰式命名组件，那么在使用组件的时候，只能在字符串模板中用驼峰的方式使用组件; // 7、但是在普通的标签模板中，必须使用短横线的方式使用组件 Vue.component('HelloWorld', { data: function(){ return { msg: 'HelloWorld' } }, template: '<div>{{msg}}</div>' }); Vue.component('button-counter', { // 1、组件参数的data值必须是函数,同时这个函数要求返回一个对象 data: function(){ return { count: 0 } }, // 2、组件模板必须是单个根元素 // 3、组件模板的内容可以是模板字符串 template: ` <div> <button @click="handle">点击了{{count}}次</button> <button>测试123</button> # 6 在字符串模板中可以使用驼峰的方式使用组件 <HelloWorld></HelloWorld> </div> `, methods: { handle: function(){ this.count += 2; } } }) var vm = new Vue({ el: '#app', data: { } }); </script>
只能在当前注册它的vue实例中使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <hello-world></hello-world> <hello-tom></hello-tom> <hello-jerry></hello-jerry> <test-com></test-com> </div> <script type="text/javascript" src="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>
