黑马程序员技术交流社区
标题: 【上海校区】Vue 组件系统 [打印本页]
作者: 梦缠绕的时候 时间: 2019-9-5 11:08
标题: 【上海校区】Vue 组件系统
vue.js既然是框架，那就不能只是简单的完成数据模板引擎的任务，它还提供了页面布局的功能。本文详细介绍使用vue.js进行页面布局的强大工具，vue.js组件系统。
每一个新技术的诞生，都是为了解决特定的问题。组件的出现就是为了解决页面布局等等一系列问题。vue中的组件分为两种，全局组件和局部组件。
一、全局组件的注册通过Vue.component()创建一个全局组件之后，我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../statics/vue.min.js"></script></head><body> <div id="app"> <!--第二步，使用--> <global_component></global_component> </div> <script> // 第一步，注册 Vue.component("global_component", { template: ` <div> <h2>Hello Vue</h2> </div> ` }); new Vue({ el: "#app", }); </script></body></html>1、组件的参数因为组件是可复用的 Vue 实例,所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el这样根实例特有的选项。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../statics/vue.min.js"></script></head><body> <div id="app"> <!--第二步，使用--> <global_component></global_component> </div> <script> // 第一步，注册 Vue.component("global_component", { data: function () { return { count: 0 } }, template: `<button v-on:click="count++">You clicked me {{ count }} times.</button>` }); new Vue({ el: "#app", }); </script></body></html>2、组件的复用每个实例维护自己的一份独立的数据。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../statics/vue.min.js"></script></head><body> <div id="app"> <!--第二步，使用--> <global_component></global_component> <global_component></global_component> <global_component></global_component> </div> <script> // 第一步，注册 Vue.component("global_component", { data: function () { return { count: 0 } }, template: `<button v-on:click="count++">You clicked me {{ count }} times.</button>` }); new Vue({ el: "#app", }); </script></body></html>注意当点击按钮时，每个组件都会各自独立维护它的 count。因为你每用一次组件，就会有一个它的新实例被创建。
3、Data必须是一个函数data必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝, 也可以写成如下形式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../statics/vue.min.js"></script></head><body> <div id="app"> <!--第二步，使用--> <global_component></global_component> <global_component></global_component> <global_component></global_component> </div> <script> // 第一步，注册 Vue.component("global_component", { data(){ return { count: 0 } }, template: `<button v-on:click="count++">You clicked me {{ count }} times.</button>` }); new Vue({ el: "#app", }); </script></body></html>
二、局部组件的注册全局注册往往是不够理想的。比如，如果你使用一个像 webpack 这样的构建系统，全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。
全局组件始终是存在的，除非程序结束，如果组件越来越大，那么程序所占用的空间和消耗的性能就会更大。
1、局部组件的第一种使用方式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../statics/vue.min.js"></script></head><body> <div id="component-demo"> <!--最后在根元素当中使用它--> <!--第一种使用方式，会把当前div渲染进DOM--> <my-header></my-header> </div> <script> // 定义一个局部组件，其实就是一个变量，它是一个object类型 // 属性与全局组件是一样的 let Header = { template: ` <button @click="count++">{{ count }}</button> `, data() { return { count: 0 } } }; new Vue({ el: "#component-demo", // 第二部，需要在根实例当中使用它 components: { 'my-header': Header } }); </script></body></html>2、局部组件的第二种使用方式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../statics/vue.min.js"></script></head><body> <div id="component-demo"> </div> <script> // 定义一个局部组件，其实就是一个变量，它是一个object类型 // 属性与全局组件是一样的 let Header = { template: ` <button @click="count++">{{ count }}</button> `, data() { return { count: 0 } } }; new Vue({ el: "#component-demo", // 第二种使用方式，不会将div渲染进DOM，以template为根元素 template: `<my-header></my-header>`, // 第二步，需要在根实例当中使用它 components: { 'my-header': Header } }); </script></body></html>对于 components 对象中的每个属性来说，其属性名就是自定义元素的名字，其属性值就是这个组件的选项对象。
3、在局部组件中使用子组件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../statics/vue.min.js"></script> <style> body { margin: 0; } .box { width: 100%; height: 50px; background-color: #2aabd2; } </style></head><body> <div id="component-demo"> </div> <script> // 定义一个局部组件，其实就是一个变量，它是一个object类型 // 这个对象的属性与全局组件是一样的(除el属性外) let Fcontent = { template: ` <div> <span>这是头条</span> </div> ` }; let Header = { template: ` <div v-bind:class='{box: isBox}'> <button @click="count++">{{ count }}</button> <first-content></first-content> </div> `, data() { return { count: 0, isBox: true } }, components: { 'first-content': Fcontent } }; new Vue({ el: "#component-demo", // 第二种使用方式，不会将div渲染进DOM，以template为根元素 template: `<my-header></my-header>`, // 第二步，需要在根实例当中使用它 components: { 'my-header': Header } }); </script></body></html>
三、父子组件的通信<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../statics/vue.min.js"></script> <style> body { margin: 0; } .box { width: 100%; height: 50px; background-color: #2aabd2; } </style></head><body> <div id="component-demo"> </div> <script> // 定义一个局部组件，其实就是一个变量，它是一个object类型 // 属性与全局组件是一样的 let Fcontent = { template: ` <div> <span>这是头条</span> {{ fdata }} </div> `, props: ['fdata'] }; let Header = { template: ` <div v-bind:class='{box: isBox}'> <button @click="count++">{{ count }}</button> <first-content :fdata="fathData"></first-content> </div> `, data() { return { count: 0, isBox: true, fathData: "我是你爸爸~~~" } }, components: { 'first-content': Fcontent } }; new Vue({ el: "#component-demo", // 第二种使用方式，不会将div渲染进DOM，以template为根元素 template: `<my-header></my-header>`, // 第二步，需要在根实例当中使用它 components: { 'my-header': Header } }); </script></body></html>
四、子父之间的通信父组件在mounted的时候，监听一个自定义事件。
给子组件绑定一个click事件之后，通过内建的方法$emit在父组件上触发一个事件，这个事件就是父组件监听的自定义事件。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../statics/vue.min.js"></script></head><body> <div id="app"> </div> <script> let myFooter = { template: ` <div> <h1>我是儿子</h1> <button v-on:click="changeFatherSize">点击修改爸爸的字体</button> </div> `, methods: { changeFatherSize: function () { this.$emit('change-font', 1); } }, }; let myHeader = { template: ` <div> <my-footer v-on:change-font="changeSize"></my-footer> <span :style="{ fontSize: fontSize + 'px'}">我是爸爸</span> </div> `, data(){ return { fontSize: 26, } }, methods: { changeSize: function (value) { console.log(value); this.fontSize += value; } }, components: { 'my-footer': myFooter } }; let App = { template: ` <div> <my-header></my-header> </div> `, components: { 'my-header': myHeader, }, }; new Vue({ el: "#app", template: `<App></App>`, components: { App } }) </script></body></html>
五、平行组件之间的通信平行组件之间可以通过一个中间Vue实例来进行通信。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../statics/vue.min.js"></script></head><body> <div id="app"> <com-main></com-main> </div> <script> let bus = new Vue(); let dogfa = { template: ` <div> <button @click="dogfaClick">点击向djb道歉</button> </div> `, methods: { dogfaClick: function () { bus.$emit("dogfa_apo", "原谅我吧，请你大保健~~~"); } }, }; let djb = { template: ` <div v-show="isShow">原谅你了~~~</div> `, mounted () { bus.$on("dogfa_apo", (dogfasay)=> { if ( dogfasay ) { console.log("原谅你了~~~"); } }); }, data () { return { isShow: false }; } }; let App = { template: ` <div id="app"> <dogfa></dogfa> <djb></djb> </div> `, components: { dogfa, djb } }; new Vue({ el: "#app", template: '<App></App>', components: { App }, }) </script></body></html>
六、混入混入可以提高代码的重用性
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../statics/vue.min.js"></script></head><body> <div id="app"> </div> <script> let mixins = { methods: { show: function (name) { console.log(`${name} is here`); }, hide: function (name) { console.log(`${name} is here`); } } }; let myAlex = { template: ` <div> <button @click="show('alex')">点我显示alex</button> <button @click="hide('alex')">点我隐藏alex</button> </div> `, mixins: [mixins] }; let myPeiQi = { template: ` <div> <button @click="show('peiqi')">点我显示peiqi</button> <button @click="hide('peiqi')">点我隐藏peiqi</button> </div> `, mixins: [mixins], }; let App = { template: ` <div> <my-alex></my-alex> <my-peiqi></my-peiqi> </div> `, components: { 'my-alex': myAlex, 'my-peiqi': myPeiQi, }, }; new Vue({ el: "#app", template: `<App></App>`, components: { App } }) </script></body></html>
七、插槽有时候我们需要向组件传递一些数据，这时候可以使用插槽
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .nav-link { width: 100px; height: 100px; background-color: #2aabd2; float: left; margin-left: 5px; text-align: center; line-height: 100px; } </style> <script src="../statics/vue.js"></script></head><body> <div id="app01"> <com-content>登录</com-content> <com-content>注册</com-content> <com-content>最热</com-content> <com-content>段子</com-content> <com-content>42区</com-content> <com-content>图片</com-content> </div> <script> Vue.component('com-content', { template: ` <div class="nav-link"> <slot></slot> </div> ` }); new Vue({ el: "#app01", }) </script></body></html>
八、具名插槽操作使用了组件的复用，如果我们在同一个组件内写入不同的页面呢？此时，我们需要多个插槽，并且给不同的内容命名。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .nav-link { width: 100px; height: 100px; background-color: #2aabd2; float: left; margin-left: 5px; text-align: center; line-height: 100px; } </style> <script src="../statics/vue.js"></script></head><body> <div id="app01"> <base-layout> <template slot="header"> <h1>这是标题栏</h1> </template> <template> <h2>这是内容</h2> </template> <template slot="footer"> <h3>这是页脚</h3> </template> </base-layout> </div> <script> let baseLayout = { template: ` <div class="container"> <header> <slot name="header"></slot> </header> <main><slot></slot></main> <footer> <slot name="footer"></slot> </footer> </div> ` }; new Vue({ el: "#app01", components: { "base-layout": baseLayout } }) </script></body></html>我们还是可以保留一个未命名插槽，这个插槽是默认插槽，也就是说它会作为所有未匹配到插槽的内容的统一出口。
九、在组件上使用v-model自定义事件也可以用于创建支持 v-model 的自定义输入组件。记住：
`<input v-model="searchText">`等价于：
<input v-bind:value="searchText" v-on:input="searchText = $event.target.value">当用在组件上时，v-model 则会这样：
<custom-input v-bind:value="searchText" v-on:input="searchText = $event"></custom-input>为了让它正常工作，这个组件内的 <input> 必须：
将其 value 特性绑定到一个名叫 value 的 prop 上在其 input 事件被触发时，将新的值通过自定义的 input 事件抛出写成代码之后是这样的：
Vue.component('custom-input', { props: ['value'], template: ` <input v-bind:value="value" v-on:input="$emit('input', $event.target.value)" > `})现在 v-model 就应该可以在这个组件上完美地工作起来了：
<custom-input v-model="searchText"></custom-input>如下是在组件中使用v-model示例：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../statics/vue.min.js"></script></head><body> <div id="app"> </div> <script> let Model = { template: ` <div> <input v-bind:value="value" v-on:input="$emit('input', $event.target.value)" /> <h1>{{ value }}</h1> `, props: ['value'] }; let App = { template: ` <div> <custom-input v-model="searchText"></custom-input> `, components: { 'custom-input': Model, }, data(){ return { searchText: "", } } }; new Vue({ el: "#app", template: `<App></App>`, components: { App, } }) </script></body></html>
十、使用组件的注意事项1、注意事项一：单个根元素当构建一个内容页面的组件时，我们的组件可能包含多个HTML标签。
<h1>Hello World</h1><h2>Hello Vue</h2>然而如果你在模板中尝试这样写，Vue 会显示一个错误，并解释道 every component must have a single root element (每个组件必须只有一个根元素)。你可以将模板的内容包裹在一个父元素内，来修复这个问题，例如：
<div> <h1>Hello World</h1> <h2>Hello Vue</h2></div>
2、注意事项二：解析特殊HTML元素有些 HTML 元素，诸如 <ul>、<ol>、<table> 和 <select>，对于哪些元素可以出现在其内部是有严格限制的。而有些元素，诸如 <li>、<tr> 和 <option>，只能出现在其它某些特定的元素内部。
这会导致我们使用这些有约束条件的元素时遇到一些问题。例如：
<table> <blog-post-row></blog-post-row></table>这个自定义组件 <blog-post-row> 会被作为无效的内容提升到外部，并导致最终渲染结果出错。幸好这个特殊的 is 特性给了我们一个变通的办法：
<table> <tr is="blog-post-row"></tr></table>需要注意的是如果我们从以下来源使用模板的话，这条限制是不存在的：
字符串 (例如：template: '...')单文件组件 (.vue)<script type="text/x-template">
作者: 梦缠绕的时候 时间: 2019-9-5 11:09
有任何问题欢迎在评论啊区留言
作者: 梦缠绕的时候 时间: 2019-9-5 11:09
或者添加学姐微信
DKA-2018
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |