點擊下載
本文文檔

當前位置：首頁 - 科技 - 知識百科 - 正文

Vue.js 2.x之組件的定義和注冊圖文詳解

來源：懂視網(wǎng) 責編：小采時間：2020-11-27 22:12:45

Vue.js 2.x之組件的定義和注冊圖文詳解

Vue.js 2.x之組件的定義和注冊圖文詳解:前言什么是組件組件：組件的出現(xiàn)，就是為了拆分Vue實例的代碼量的，能夠讓我們以不同的組件，來劃分不同的功能模塊，將來我們需要什么樣的功能，就可以去調(diào)用對應(yīng)的組件即可。模塊化和組件化的區(qū)別模塊化：是從代碼邏輯的角度進行劃分的；方便代碼分層

推薦度：

點擊下載本文 文檔為doc格式

導讀Vue.js 2.x之組件的定義和注冊圖文詳解:前言什么是組件組件：組件的出現(xiàn)，就是為了拆分Vue實例的代碼量的，能夠讓我們以不同的組件，來劃分不同的功能模塊，將來我們需要什么樣的功能，就可以去調(diào)用對應(yīng)的組件即可。模塊化和組件化的區(qū)別模塊化：是從代碼邏輯的角度進行劃分的；方便代碼分層

前言

什么是組件

組件：組件的出現(xiàn)，就是為了拆分Vue實例的代碼量的，能夠讓我們以不同的組件，來劃分不同的功能模塊，將來我們需要什么樣的功能，就可以去調(diào)用對應(yīng)的組件即可。

模塊化和組件化的區(qū)別

模塊化：是從代碼邏輯的角度進行劃分的；方便代碼分層開發(fā)，保證每個功能模塊的職能單一

組件化：是從UI界面的角度進行劃分的；前端的組件化，方便UI組件的重用

全局組件的定義和注冊

組件Component是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素，封裝可重用的代碼。

全局組件的定義和注冊有三種方式，我們接下來講一講。

寫法一

寫法一：使用Vue.extend方法定義組件，使用 Vue.component方法注冊組件。

代碼舉例：

<!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>Document</title>
 <script src="vue2.5.16.js"></script>
</head>
<body>
 <div id="app">
 <!-- 如果要使用組件，直接把組件的名稱，以 HTML 標簽的形式，引入到頁面中，即可 -->
 <account> </account>
 </div>
 <script>
 //第一步：使用 Vue.extend 定義組件
 var myAccount = Vue.extend({
 template: '<div><h2>登錄頁面</h2> <h3>注冊頁面</h3></div>' // 通過 template 屬性，指定了組件要展示的HTML結(jié)構(gòu)。template 是 Vue 中的關(guān)鍵字，不能改。
 });
 //第二步：使用 Vue.component 注冊組件
 // Vue.component('組件的名稱', 創(chuàng)建出來的組件模板對象)
 Vue.component('account', myAccount); //第一個參數(shù)是組件的名稱（標簽名），第二個參數(shù)是模板對象
 new Vue({
 el: '#app'
 });
 </script>
</body>
</html>

上方代碼中，在注冊組件時，第一個參數(shù)是標簽名，第二個參數(shù)是組件的定義。

運行結(jié)果如下：

代碼截圖如下：

上圖中，注意兩點：

注意1、紅框部分，要保證二者的名字是一致的。如果在注冊時，組件的名稱是駝峰命名，比如：

Vue.component('myComponent', myAccount); //第一個參數(shù)是組件的名稱（標簽名），第二個參數(shù)是模板對象
那么，在標簽中使用組件時，需要把大寫的駝峰改為小寫的字母，同時兩個單詞之間使用-進行連接：

<my-component> </my-component>
Vue.component('my')

注意2、綠框部分，一定要用一個大的根元素（例如<div>）包裹起來。如果我寫成下面這樣，就沒有預期的效果：

 template: '<h2>登錄頁面</h2> <h3>注冊頁面</h3>'

結(jié)果如下：（并非預期的效果）

寫法二

寫法二：Vue.component方法定義、注冊組件（一步到位）。

代碼如下：

<!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>Document</title>
 <script src="vue2.5.16.js"></script>
</head>
<body>
 <div id="app">
 <account> </account>
 </div>
 <script>
 //定義、注冊組件：第一個參數(shù)是組件的名稱（標簽名），第二個參數(shù)是組件的定義
 Vue.component('account', {
 template: '<div><h2>登錄頁面</h2> <h3>注冊頁面</h3></div>' // template 是 Vue 中的關(guān)鍵字，不能改。
 });
 new Vue({
 el: '#app'
 });
 </script>
</body>
</html>

代碼截圖如下：

上圖中，同樣注意兩點：

1、紅框部分，要保證二者的名字是一致的。

2、綠框部分，一定要用一個大的根元素（例如<div>）包裹起來。如果我寫成下面這樣，就沒有預期的效果：

 template: '<h2>登錄頁面</h2> <h3>注冊頁面</h3>'

結(jié)果如下：（并非預期的效果）

寫法三

上面的寫法一、寫法二并不是很智能，因為在定義模板的時候，沒有智能提示和高亮，容易出錯。我們不妨來看看寫法三。

寫法三：將組件內(nèi)容定義到template標簽中去。

代碼如下：

<!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>Document</title>
 <script src="vue2.5.16.js"></script>
</head>
<body>
 <!-- 定義模板 -->
 <template id="myAccount">
 <div>
 <h2>登錄頁面</h2>
 <h3>注冊頁面</h3>
 </div>
 </template>
 <div id="app">
 <!-- 使用組件 -->
 <account> </account>
 </div>
 <script>
 //定義、注冊組件
 Vue.component('account', {
 template: '#myAccount' // template 是 Vue 中的關(guān)鍵字，不能改。
 });
 new Vue({
 el: '#app'
 });
 </script>
</body>
</html>

代碼截圖如下：

寫法三其實和方法二差不多，無非是把綠框部分的內(nèi)容，單獨放在了<template>標簽中而已，這樣有利于 html 標簽的書寫。

使用components定義私有組件

我們在上一段中定義的是全局組件，這樣做的時候，多個Vue實例都可以使用這個組件。

我們可以在一個Vue實例的內(nèi)部定義私有組件，這樣做的時候，只有當前這個Vue實例才可以使用這個組件。

<!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>Document</title>
 <script src="vue2.5.16.js"></script>
</head>
<body>
 <div id="app">
 <!-- 使用Vue實例內(nèi)部的私有組件 -->
 <my-login></my-login>
 </div>
 <script>
 new Vue({
 el: '#app',
 data: {},
 components: { // 定義、注冊Vue實例內(nèi)部的私有組件
 myLogin: {
 template: '<h3>這是私有的login組件</h3>'
 }
 }
 });
 </script>
</body>
</html>

運行效果：

當然，我們還可以把模板的定義存放在<template>標簽中，這樣的話，模板里的html標簽就可以出現(xiàn)智能提示和高亮，避免出錯。如下：

<!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>Document</title>
 <script src="vue2.5.16.js"></script>
</head>
<body>
 <!-- 定義模板 -->
 <template id="loginTmp">
 <h3>這是私有的login組件</h3>
 </template>
 <div id="app">
 <!-- 調(diào)用Vue實例內(nèi)部的私有組件 -->
 <my-login></my-login>
 </div>
 <script>
 new Vue({
 el: '#app',
 data: {},
 components: { // 定義、注冊Vue實例內(nèi)部的私有組件
 myLogin: {
 template: '#loginTmp'
 }
 }
 });
 </script>
</body>
</html>

運行效果不變。

為組件添加 data 和 methods

既然組件是一個頁面，那么，頁面中可能會有一些功能要動態(tài)展示。因此，我們有必要為組件添加 data 和 methods。

代碼舉例如下：

<!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>Document</title>
 <script src="vue2.5.16.js"></script>
</head>
<body>
 <!-- 定義組件的模板 -->
 <template id="myAccount">
 <div>
 <!-- 在組件的模板中，調(diào)用本組件中的data -->
 {{myData}}
 <a href="#" rel="external nofollow" v-on:click="login">登錄1</a>
 <h2>登錄頁面</h2>
 <h3>注冊頁面</h3>
 </div>
 </template>
 <div id="app">
 <!-- 第一次調(diào)用組件 -->
 <account> </account>
 <!-- 第二次調(diào)用組件 -->
 <account> </account>
 </div>
 <script>
 //定義、注冊組件
 Vue.component('account', {
 template: '#myAccount',
 //組件中的 data
 //【注意】組件中的data，不再是對象，而是一個方法（否則報錯）；而且這個方法內(nèi)部，還必須返回一個對象才行
 // 組件中 的data 數(shù)據(jù),使用方式,和實例中的 data 使用方式完全一樣!!!
 data: function () {
 return {
 myData: 'smyhvae'
 }
 },
 //組件中的 method
 methods: {
 login: function () {
 alert('login操作');
 }
 }
 });
 new Vue({
 el: '#app'
 });
 </script>
</body>
</html>

上方代碼所示，我們在account組件中添加的data 和 methods，其作用域只限于account組件里，保證獨立性。

注意，在為組件添加數(shù)據(jù)時，data不再是對象了，而是function，而且要通過 return的形式進行返回；否則，頁面上是無法看到效果的。通過 function返回對象的形式來定義data，作用是：

上方代碼中，組件<account>被調(diào)用了兩次（不像根組件那樣只能調(diào)用一次），但是每個組件里的數(shù)據(jù) myData是各自獨立的，不產(chǎn)生沖突。

換而言之，通過函數(shù)返回對象的目的，是為了讓每個組件都有自己獨立的數(shù)據(jù)存儲，而不應(yīng)該共享一套數(shù)據(jù)。

為什么組件的data必須是一個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>Document</title>
 <script src="vue2.5.16.js"></script>
</head>
<body>
 <div id="app">
 <!-- 第一次調(diào)用組件 -->
 <counter></counter>
 <hr>
 <!-- 第二次調(diào)用組件 -->
 <counter></counter>
 </div>
 <!-- 定義模板 -->
 <template id="tmpl">
 <div>
 <input type="button" value="讓count加1" @click="increment">
 <h3>{{count}}</h3>
 </div>
 </template>
 <script>
 var dataObj = { count: 0 }
 // 這是一個計數(shù)器的組件, 身上有個按鈕,每當點擊按鈕,讓 data 中的 count 值 +1
 Vue.component('counter', {
 template: '#tmpl',
 data: function () {
 return dataObj //當我們return全局的dataObj的時候，子組件們會共享這個dataObj
 },
 methods: {
 increment() {
 this.count++
 }
 }
 })
 // 創(chuàng)建 Vue 實例，得到 ViewModel
 var vm = new Vue({
 el: '#app',
 data: {},
 methods: {}
 });
 </script>
</body>
</html>

運行效果如下：

上面的例子中，將組件<counter>調(diào)用了兩次，由于dataObj是全局對象，導致兩個組件實例都可以共享這個dataObj數(shù)據(jù)。于是，我們點擊任何一個組件實例的按鈕，都可以讓count數(shù)據(jù)加1。

現(xiàn)在問題來了，如果我們想讓組件<counter>的兩個實例去單獨操作count數(shù)據(jù)，應(yīng)該怎么做呢？我們應(yīng)該修改 data中 return出去的內(nèi)容：

<!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>Document</title>
 <script src="vue2.5.16.js"></script>
</head>
<body>
 <div id="app">
 <counter></counter>
 <hr>
 <counter></counter>
 <hr>
 <counter></counter>
 </div>
 <template id="tmpl">
 <div>
 <input type="button" value="讓count加1" @click="increment">
 <h3>{{count}}</h3>
 </div>
 </template>
 <script>
 var dataObj = { count: 0 }
 // 這是一個計數(shù)器的組件, 身上有個按鈕,每當點擊按鈕,讓 data 中的 count 值 +1
 Vue.component('counter', {
 template: '#tmpl',
 data: function () {
 // return dataObj //當我們return全局的dataObj的時候，這個dataObj是共享的
 return { count: 0 } // 【重要】return一個**新開辟**的對象數(shù)據(jù)
 },
 methods: {
 increment() {
 this.count++
 }
 }
 })
 // 創(chuàng)建 Vue 實例，得到 ViewModel
 var vm = new Vue({
 el: '#app',
 data: {},
 methods: {}
 });
 </script>
</body>
</html>

運行效果：

如上圖所示，每當我們創(chuàng)建一個新的組件實例時，就會調(diào)用data函數(shù)，data函數(shù)里會return一個新開辟的對象數(shù)據(jù)。這樣做，就可以保證每個組件實例有獨立的數(shù)據(jù)存儲。

組件的切換

使用v-if和v-else結(jié)合flag進行切換

代碼舉例：（登錄組件/注冊組件，二選一）

<!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>Document</title>
 <script src="vue2.5.16.js"></script>
</head>
<body>
 <div id="app">
 <!-- 溫馨提示：`.prevent`可以阻止超鏈接的默認事件 -->
 <a href="" @click.prevent=" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" flag=true">登錄</a>
 <a href="" @click.prevent=" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" flag=false">注冊</a>
 <!-- 登錄組件/注冊組件，同時只顯示一個 -->
 <login v-if="flag"></login>
 <register v-else="flag"></register>
 </div>
 <script>
 Vue.component('login', {
 template: '<h3>登錄組件</h3>'
 })
 Vue.component('register', {
 template: '<h3>注冊組件</h3>'
 })
 // 創(chuàng)建 Vue 實例，得到 ViewModel
 var vm = new Vue({
 el: '#app',
 data: {
 flag: false
 },
 methods: {}
 });
 </script>
</body>
</html>

運行效果如下：

使用Vue提供的<component>標簽實現(xiàn)組件切換

上面的例子中，我們是通過flag的值來進行組件的切換。但是，flag的值只可能有兩種情況，也就是說，v-if和v-else只能進行兩個組件之間的切換。

那如何實現(xiàn)三個甚至三個以上的組件切換呢？這里，我們可以用到Vue提供的<component>標簽。

我們先來看一下<component>標簽的用法。

基于上面的代碼，如果我想讓login組件顯示出來，借助<component>標簽可以這樣做：

<!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>Document</title>
 <script src="Vue2.5.16.js"></script>
</head>
<body>
 <div id="app">
 <!-- Vue提供了 component ,來展示對應(yīng)名稱的組件 -->
 <!-- 【重要】component 是一個占位符, `:is` 屬性,可以用來指定要展示的組件名稱。這里，我們讓 login 組件顯示出來 -->
 <component :is="'login'"></component>
 </div>
 <script>
 // 組件名稱是 字符串
 Vue.component('login', {
 template: '<h3>登錄組件</h3>'
 })
 Vue.component('register', {
 template: '<h3>注冊組件</h3>'
 })
 // 創(chuàng)建 Vue 實例，得到 ViewModel
 var vm = new Vue({
 el: '#app',
 data: {
 comName: 'login' // 當前 component 中的 :is 綁定的組件的名稱
 },
 methods: {}
 });
 </script>
</body>
</html>

上方代碼中，提取關(guān)鍵代碼如下：

 <component :is="'login'"></component>

如果我想讓register組件顯示出來，借助<component>標簽可以這樣做：

<!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>Document</title>
 <script src="Vue2.5.16.js"></script>
</head>
<body>
 <div id="app">
 <!-- Vue提供了 component ,來展示對應(yīng)名稱的組件 -->
 <!-- 【重要】component 是一個占位符, `:is` 屬性,可以用來指定要展示的組件名稱 -->
 <component :is="'register'"></component>
 </div>
 <script>
 // 組件名稱是 字符串
 Vue.component('login', {
 template: '<h3>登錄組件</h3>'
 })
 Vue.component('register', {
 template: '<h3>注冊組件</h3>'
 })
 // 創(chuàng)建 Vue 實例，得到 ViewModel
 var vm = new Vue({
 el: '#app',
 data: {
 comName: 'login' // 當前 component 中的 :is 綁定的組件的名稱
 },
 methods: {}
 });
 </script>
</body>
</html>

上方代碼中，提取關(guān)鍵代碼如下：

 <component :is="'register'"></component>

因此，如果要實現(xiàn)組件之間的切換，我們可以給<component>標簽里的is屬性值設(shè)置為變量即可，來看看代碼實現(xiàn)。

實現(xiàn)組件切換的完整代碼：

<!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>Document</title>
 <script src="vue2.5.16.js"></script>
</head>
<body>
 <div id="app">
 <!-- 點擊按鈕后，設(shè)置變量`comName`為不同的值，代表著后面的component里顯示不同的組件 -->
 <a href="" @click.prevent=" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" comName='login'">登錄</a>
 <a href="" @click.prevent=" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" comName='register'">注冊</a>
 <!-- Vue提供了 component ,來展示對應(yīng)名稱的組件 -->
 <!-- component 是一個占位符, :is 屬性,可以用來指定要展示的組件的名稱 -->
 <!-- 此處的`comName`是變量，變量值為組件名稱 -->
 <component :is="comName"></component>
 </div>
 <script>
 // 組件名稱是 字符串
 Vue.component('login', {
 template: '<h3>登錄組件</h3>'
 })
 Vue.component('register', {
 template: '<h3>注冊組件</h3>'
 })
 // 創(chuàng)建 Vue 實例，得到 ViewModel
 var vm = new Vue({
 el: '#app',
 data: {
 comName: 'login' // 當前 component 中的 :is 綁定的組件的名稱
 },
 methods: {}
 });
 </script>
</body>
</html>

效果：

總結(jié)

以上所述是小編給大家介紹的Vue.js 2.x之組件的定義和注冊圖文詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com