欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2018年06月19日 09:13:57   作者:生命壹號  
組件Component是 Vue.js 最強(qiáng)大的功能之一。組件可以擴(kuò)展 HTML 元素,封裝可重用的代碼,這篇文章主要介紹了Vue.js 2.x:組件的定義和注冊,需要的朋友可以參考下

前言

什么是組件

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

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

  • 模塊化:是從代碼邏輯的角度進(jìn)行劃分的;方便代碼分層開發(fā),保證每個功能模塊的職能單一
  • 組件化:是從UI界面的角度進(jìn)行劃分的;前端的組件化,方便UI組件的重用

全局組件的定義和注冊

組件Component是 Vue.js 最強(qiáng)大的功能之一。組件可以擴(kuò)展 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 標(biāo)簽的形式,引入到頁面中,即可 -->
  <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ù)是組件的名稱(標(biāo)簽名),第二個參數(shù)是模板對象
  new Vue({
   el: '#app'
  });
 </script>
</body>
</html>

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

運(yùn)行結(jié)果如下:

代碼截圖如下:

上圖中,注意兩點(diǎn):

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

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

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

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

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

結(jié)果如下:(并非預(yù)期的效果)

寫法二

寫法二: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ù)是組件的名稱(標(biāo)簽名),第二個參數(shù)是組件的定義
  Vue.component('account', {
   template: '<div><h2>登錄頁面</h2> <h3>注冊頁面</h3></div>' // template 是 Vue 中的關(guān)鍵字,不能改。
  });
  new Vue({
   el: '#app'
  });
 </script>
</body>
</html>

代碼截圖如下:

上圖中,同樣注意兩點(diǎn):

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

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

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

結(jié)果如下:(并非預(yù)期的效果)

寫法三

上面的寫法一、寫法二并不是很智能,因?yàn)樵诙x模板的時候,沒有智能提示和高亮,容易出錯。我們不妨來看看寫法三。

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

代碼如下:

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

代碼截圖如下:

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

使用components定義私有組件

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

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

<!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實(shí)例內(nèi)部的私有組件 -->
  <my-login></my-login>
 </div>
 <script>
  new Vue({
   el: '#app',
   data: {},
   components: { // 定義、注冊Vue實(shí)例內(nèi)部的私有組件
    myLogin: {
     template: '<h3>這是私有的login組件</h3>'
    }
   }
  });
 </script>
</body>
</html>

運(yùn)行效果:

當(dāng)然,我們還可以把模板的定義存放在<template>標(biāo)簽中,這樣的話,模板里的html標(biāo)簽就可以出現(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實(shí)例內(nèi)部的私有組件 -->
  <my-login></my-login>
 </div>
 <script>
  new Vue({
   el: '#app',
   data: {},
   components: { // 定義、注冊Vue實(shí)例內(nèi)部的私有組件
    myLogin: {
     template: '#loginTmp'
    }
   }
  });
 </script>
</body>
</html>

運(yùn)行效果不變。

為組件添加 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ù),使用方式,和實(shí)例中的 data 使用方式完全一樣!!!
   data: function () {
    return {
     myData: 'smyhvae'
    }
   },
   //組件中的 method
   methods: {
    login: function () {
     alert('login操作');
    }
   }
  });
  new Vue({
   el: '#app'
  });
 </script>
</body>
</html>

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

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

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

換而言之,通過函數(shù)返回對象的目的,是為了讓每個組件都有自己獨(dú)立的數(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ù)器的組件, 身上有個按鈕,每當(dāng)點(diǎn)擊按鈕,讓 data 中的 count 值 +1
  Vue.component('counter', {
   template: '#tmpl',
   data: function () {
    return dataObj //當(dāng)我們return全局的dataObj的時候,子組件們會共享這個dataObj
   },
   methods: {
    increment() {
     this.count++
    }
   }
  })
  // 創(chuàng)建 Vue 實(shí)例,得到 ViewModel
  var vm = new Vue({
   el: '#app',
   data: {},
   methods: {}
  });
 </script>
</body>
</html>

運(yùn)行效果如下:

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

現(xiàn)在問題來了,如果我們想讓組件<counter>的兩個實(shí)例去單獨(dú)操作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ù)器的組件, 身上有個按鈕,每當(dāng)點(diǎn)擊按鈕,讓 data 中的 count 值 +1
  Vue.component('counter', {
   template: '#tmpl',
   data: function () {
    // return dataObj //當(dāng)我們return全局的dataObj的時候,這個dataObj是共享的
    return { count: 0 } // 【重要】return一個**新開辟**的對象數(shù)據(jù)
   },
   methods: {
    increment() {
     this.count++
    }
   }
  })
  // 創(chuàng)建 Vue 實(shí)例,得到 ViewModel
  var vm = new Vue({
   el: '#app',
   data: {},
   methods: {}
  });
 </script>
</body>
</html>

運(yùn)行效果:

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

組件的切換

使用v-if和v-else結(jié)合flag進(jì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">
  <!-- 溫馨提示:`.prevent`可以阻止超鏈接的默認(rèn)事件 -->
  <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 實(shí)例,得到 ViewModel
  var vm = new Vue({
   el: '#app',
   data: {
    flag: false
   },
   methods: {}
  });
 </script>
</body>
</html>

運(yùn)行效果如下:

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

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

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

我們先來看一下<component>標(biāo)簽的用法。

基于上面的代碼,如果我想讓login組件顯示出來,借助<component>標(biāo)簽可以這樣做:

<!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 實(shí)例,得到 ViewModel
  var vm = new Vue({
   el: '#app',
   data: {
    comName: 'login' // 當(dāng)前 component 中的 :is 綁定的組件的名稱
   },
   methods: {}
  });
 </script>
</body>
</html>

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

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

如果我想讓register組件顯示出來,借助<component>標(biāo)簽可以這樣做:

<!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 實(shí)例,得到 ViewModel
  var vm = new Vue({
   el: '#app',
   data: {
    comName: 'login' // 當(dāng)前 component 中的 :is 綁定的組件的名稱
   },
   methods: {}
  });
 </script>
</body>
</html>

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

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

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

實(shí)現(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">
  <!-- 點(diǎn)擊按鈕后,設(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 實(shí)例,得到 ViewModel
  var vm = new Vue({
   el: '#app',
   data: {
    comName: 'login' // 當(dāng)前 component 中的 :is 綁定的組件的名稱
   },
   methods: {}
  });
 </script>
</body>
</html>

效果:

總結(jié)

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

相關(guān)文章

最新評論