Vue.js中的组件系统

(编辑：jimmy 日期: 2024/11/18 浏览：2)

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="/UploadFiles/2021-04-02/vue.min.js">


组件的参数


因为组件是可复用的 Vue 实例,所以它们与 new Vue 接收相同的选项，例如 data 、 computed 、 watch 、 methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。





<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="/UploadFiles/2021-04-02/vue.min.js">


组件的复用


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





<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="/UploadFiles/2021-04-02/vue.min.js">


注意当点击按钮时，每个组件都会各自独立维护它的 count 。因为你每用一次组件，就会有一个它的新 实例 被创建。


Data必须是一个函数


data必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝, 也可以写成如下形式





<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="/UploadFiles/2021-04-02/vue.min.js">


局部组件的注册


全局注册往往是不够理想的。比如，如果你使用一个像 webpack 这样的构建系统，全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。


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


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


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





<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="/UploadFiles/2021-04-02/vue.min.js">


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





<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="/UploadFiles/2021-04-02/vue.min.js">


对于 components 对象中的每个属性来说，其属性名就是自定义元素的名字，其属性值就是这个组件的选项对象。


在局部组件中使用子组件





<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="/UploadFiles/2021-04-02/vue.min.js">


注:


1.注意写组件标签


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


通信


父子组件的通信


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





<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="/UploadFiles/2021-04-02/vue.min.js">


子父组件的通信


父组件在mounted的时候，监听一个自定义事件。


给子组件绑定一个click事件之后，通过内建的方法$emit在父组件上触发一个事件，这个时间就是父组件监听的自定义事件。





<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="/UploadFiles/2021-04-02/vue.min.js">


非父子通信


其中一个组件向中间调度器提交事件,另一个组件监听中间调度器的事件


混入


混入可以提高代码的重用性。





<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="/UploadFiles/2021-04-02/vue.js">


插槽


有时候我们需要向组件传递一些数据，这时候可以使用插槽.





<!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="/UploadFiles/2021-04-02/vue.js">


具名插槽


操作使用了组件的复用，如果我们在同一个组件内写入不同的页面呢？此时，我们需要多个插槽，并且给不同的内容命名。





<!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="/UploadFiles/2021-04-02/vue.js">


我们还是可以保留一个未命名插槽，这个插槽是 默认插槽 ，也就是说它会作为所有未匹配到插槽的内容的统一出口。


在组件上使用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="/UploadFiles/2021-04-02/vue.min.js">


使用组件的注意事项


注意事项一：单个根元素


当构建一个内容页面的组件时，我们的组件可能包含多个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="/UploadFiles/2021-04-02/vue.min.js">


效果图:


Vue.js中的组件系统


总结


以上所述是小编给大家介绍的Vue.js中的组件系统,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！



        

            
上一篇：js逆向解密之网络爬虫

            
下一篇：Vue+Django项目部署详解