Vue.js中的组件系统

2019-11-19 11:26:04

字体：大中小

来源：转载

供稿：网友

vue.js既然是框架，那就不能只是简单的完成数据模板引擎的任务，它还提供了页面布局的功能。本文详细介绍使用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>

组件的参数

因为组件是可复用的 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>

组件的复用

每个实例维护自己的一份独立的数据。

<!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 。因为你每用一次组件，就会有一个它的新实例被创建。

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 的无谓的增加。

全局组件始终是存在的，除非程序结束，如果组件越来越大，那么程序所占用的空间和消耗的性能就会更大。

所以我们需要局部组件。不用的时候，被垃圾回收。

局部组件的第一种使用方式

<!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>

局部组件的第二种使用方式

<!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 对象中的每个属性来说，其属性名就是自定义元素的名字，其属性值就是这个组件的选项对象。

在局部组件中使用子组件

<!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>

注:

1.注意写组件标签

2.每个组件的template只识别一个作用域块

通信

父子组件的通信

在父组件中给子组件绑定属性,子组件通过props=["属性名称"]

<!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> <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>   <button v-on:click="myClick">放大父组件字体</button>  </div> `,  methods: {  myClick: function () {   console.log(this); this.$emit('change-font', 0.1);   console.log(this);  }  } }; let Header = {  template: ` <div v-bind:class='{box: isBox}'>   <first-content v-on:change-font="changeFont"></first-content>   <span :style="{ fontSize: postFontSize + 'em' }">Hello Vue</span>  </div> `,  data() { return {   count: 0,   isBox: true,   fathData: "我是你爸爸~~~",   postFontSize: 1 }  },  components: { 'first-content': Fcontent  },  methods: {  changeFont: function (value) { this.postFontSize += value;  }  } }; const VM = 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.js"></script></head><body> <div id="mixin-demo">  <my-alex></my-alex>  <p></p>  <my-peiqi></my-peiqi> </div> <script> let mixs = {   methods: {    show: function (name) {     console.log(`${name} is here!`);    },    hide: function (name) {     console.log(`${name} is gone!`);    },   }  };  let myAlex = {   template: ` <div>      <button @click="show('alex')">点我显示alex</button>      <button @click="hide('alex')">点我隐藏alex</button>     </div> `,   mixins: [mixs],  };  let myPeiqi = {   template: ` <div>      <button @mouseenter="show('peiqi')">鼠标移入显示沛齐</button>      <button @mouseleave="hide('peiqi')">鼠标离开隐藏沛齐</button>     </div> `,   mixins: [mixs],  }; new Vue({   el: "#mixin-demo",   components: { "my-alex": myAlex, "my-peiqi": myPeiqi,   }  }) </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>

使用组件的注意事项

注意事项一：单个根元素

当构建一个内容页面的组件时，我们的组件可能包含多个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>

注意事项二：解析特殊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">

使用组件实现路飞导航栏

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../statics/vue.min.js"></script> <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 引入组件库 --> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <style> body { margin: 0; padding: 0;  } .header { position: fixed; top: 0; left: 0; width: 100%;  } .el-menu { display: flex; align-items: center; justify-content: center;  } .footer { position: fixed; bottom: 0; left: 0; width: 100%;  } .header img { position: absolute; left: 80px; top: -4px; width: 118px; height: 70px; z-index: 999;  } </style></head><body> <div id="app"> </div> <template id="header">  <div class="header">   <img src="https://www.luffycity.com/static/img/head-logo.a7cedf3.svg"/>   <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">    <el-menu-item index="1">首页</el-menu-item>    <el-menu-item index="2">免费课程</el-menu-item>    <el-menu-item index="3">轻课</el-menu-item>    <el-menu-item index="4">学位课程</el-menu-item>    <el-menu-item index="5">智能题库</el-menu-item>    <el-menu-item index="6">公开课</el-menu-item>    <el-menu-item index="7">内部教材</el-menu-item>    <el-menu-item index="8">老男孩教育</el-menu-item>   </el-menu>  </div> </template> <template id="footer">  <div class="footer">   <el-menu class="el-menu-demo" mode="horizontal" background-color="black">    <el-menu-item index="1">关于我们</el-menu-item>    <el-menu-item index="2">联系我们</el-menu-item>    <el-menu-item index="3">商业合作</el-menu-item>    <el-menu-item index="4">帮助中心</el-menu-item>    <el-menu-item index="5">意见反馈</el-menu-item>    <el-menu-item index="6">新手指南</el-menu-item>   </el-menu>  </div> </template> <script> let pageHeader = {   template: "#header",   data() { return {     activeIndex: "1",    }   }  };  let pageFooter = {   template: "#footer",  };  let App = {   template: ` <div>     <div>      <page-header></page-header>     </div>     <div>      <page-footer></page-footer>     </div>    </div> `,   components: { 'page-header': pageHeader, 'page-footer': pageFooter,   }  }; new Vue({   el: "#app",   template: `<app></app>`, components: { 'app': App,   }  }) </script></body></html>

效果图: