Vue学习之全局和私有组件小结（七）
一、组件：
组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用相应的组件即可。
二、组件和模块：
1、模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一；
2、组块化：是从UI界面的角度进行划分的；前端的组块化，方便UI组件的重用。
三、定义全局组件的方式：
三种方式：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>组件</title> <script src="./lib/vue.js"></script> </head> <body> <div id="app"> <!-- 如果要使用组件，直接把组件的名称，以HTML标签的形式，引入到页面中即可 --> <mycom1></mycom1> </div> <!-- 3.在被控制的 #app外面，使用 template 元素，定义组件的HTML模板结构--> <template id="tmp1"> <div> <h1> 这是通过 template元素，在外部定义的组件结构，这个方式，有代码的智能提示和高亮 </h1> <h4>好用，不错</h4> </div> </template id="tmp2"> <h2> 这是私有的 login 组件 </h2> <template> </template> <script> Vue.component("mycom1", { template: "#tmp1" }); // 1.1 使用 Vue.extend 来创建全局的Vue组件 // var com1 = Vue.extend({ // 通过template 属性，指定了组件要展示的HTML结构 // template: "<h3>这是使用 Vue.extend 创建的组件<h3>" // }); // 1.2 使用 Vue.component('组件的名称'，创建出来的组件模板对象) // 如果使用 Vue.component 定义全局组件的时候，组件的名称使用了驼峰命名，则在引用组件的时候， // 需要把大写的驼峰改成小写的字母，同时，两个单词之前，使用 - 连接； // 如果不使用驼峰，则直接拿名称来使用即可； // Vue.component("mycom1", com1); // 2. Vue.component 第一个参数：组件的名称，将来在引用组件的时候，就是一个标签的形式来引入它的 // 第二个参数：Vue.extend 创建的组件，其中 template 就是组件将来要展示的HTML内容。 // 相当于第一种方式的简写 // Vue.component( // "mycom1", // Vue.extend({ // //注意：不论是哪种方式创建出来的组件，组件的 template 属性指向的模板内容，必须有且只能有唯一的一个元素 // template: // "<div><h3>这是使用 Vue.extend 创建的组件<h3><span>123</span></div>" // }) // ); var vm = new Vue({ el: "#app", data: {}, methods: {}, filters: {}, directives: {}, components: { //定义实例的内部私有组件的 login: { template: "#tmp2" } } }); </script> </body> </html>
四、定义私有的组件：如上图代码中的 tmp2 ;
五、组件内可以有data数据，但其是一个有return的function方法。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>组件</title> <script src="./lib/vue.js"></script> </head> <body> <div id="app"> <!-- 如果要使用组件，直接把组件的名称，以HTML标签的形式，引入到页面中即可 --> <mycom1></mycom1> </div> <script> Vue.component("mycom1", { template: "<h1>这是全局组件-----{{ msg }}</h1>", data: function() { return { msg: "这是组件的中data定义的数据" }; } }); var vm = new Vue({ el: "#app", data: {}, methods: {}, filters: {}, directives: {} }); </script> </body> </html>
六、多个组件：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>组件</title> <script src="./lib/vue.js"></script> </head> <body> <div id="app"> <counter></counter> <hr /> <counter></counter> <hr /> <counter></counter> <!-- 如果要使用组件，直接把组件的名称，以HTML标签的形式，引入到页面中即可 --> </div> <template id="tmp1"> <div> <input type="button" value="+1" @click="increment" /> <h3>{{ count }}</h3> </div> </template> <script> var dataObj = { count: 0 }; //这是一个计数器的组件，身上有个按钮，每当点击按钮，让 data 中的 count 值 +1 Vue.component("counter", { template: "#tmp1", data: function() { return { count: 0 }; }, methods: { increment() { this.count++; } } }); var vm = new Vue({ el: "#app", data: {}, methods: {}, filters: {}, directives: {} }); </script> </body> </html>
