 <div id="app">
 <button @click="toshow">點(diǎn)擊讓子組件顯示</button>
 <component v-bind:is="which_to_show"></component>
</div>
<script>
 var vm = new Vue({
 el: '#app',
 data: {
 which_to_show: "first"
 },
 methods: {
 toshow: function () { //切換組件顯示
 var arr = ["first", "second", "third", ""];
 var index = arr.indexOf(this.which_to_show);
 if (index < 3) {
  this.which_to_show = arr[index + 1];
 } else {
  this.which_to_show = arr[0];
 }
 }
 },
 components: {
 first: { //第一個(gè)子組件
 template: "<div>這里是子組件1</div>"
 },
 second: { //第二個(gè)子組件
 template: "<div>這里是子組件2</div>"
 },
 third: { //第三個(gè)子組件
 template: "<div>這里是子組件3</div>"
 },
 }
 });
</script>

說(shuō)明：

點(diǎn)擊父組件的按鈕，會(huì)自動(dòng)切換顯示某一個(gè)子組件（根據(jù)which_to_show這個(gè)變量的值來(lái)決定）。

③keep-alive

簡(jiǎn)單來(lái)說(shuō)，被切換掉（非當(dāng)前顯示）的組件，是直接被移除了。

在父組件中查看this.$children屬性，可以發(fā)現(xiàn)，當(dāng)子組件存在時(shí)，該屬性的length為1，而子組件不存在時(shí)，該屬性的length是0（無(wú)法獲取到子組件）；

假如需要子組件在切換后，依然需要他保留在內(nèi)存中，避免下次出現(xiàn)的時(shí)候重新渲染。那么就應(yīng)該在component標(biāo)簽中添加keep-alive屬性。

如代碼：

 <div id="app">
 <button @click="toshow">點(diǎn)擊讓子組件顯示</button>
 <component v-bind:is="which_to_show" keep-alive></component>
</div>
<script>
 var vm = new Vue({
 el: '#app',
 data: {
 which_to_show: "first"
 },
 methods: {
 toshow: function () { //切換組件顯示
 var arr = ["first", "second", "third", ""];
 var index = arr.indexOf(this.which_to_show);
 if (index < 3) {
  this.which_to_show = arr[index + 1];
 } else {
  this.which_to_show = arr[0];
 }
 console.log(this.$children);
 }
 },
 components: {
 first: { //第一個(gè)子組件
 template: "<div>這里是子組件1</div>"
 },
 second: { //第二個(gè)子組件
 template: "<div>這里是子組件2</div>"
 },
 third: { //第三個(gè)子組件
 template: "<div>這里是子組件3</div>"
 },
 }
 });
</script>

說(shuō)明：

初始情況下，vm.$children屬性中只有一個(gè)元素（first組件），點(diǎn)擊按鈕切換后，vm.$children屬性中有兩個(gè)元素，再次切換后，則有三個(gè)元素（三個(gè)子組件都保留在內(nèi)存中）。

之后無(wú)論如何切換，將一直保持有三個(gè)元素。

④activate鉤子

簡(jiǎn)單來(lái)說(shuō)，他是延遲加載。

例如，在發(fā)起ajax請(qǐng)求時(shí)，會(huì)需要等待一些時(shí)間，假如我們需要在ajax請(qǐng)求完成后，再進(jìn)行加載，那么就需要用到activate鉤子了。

具體用法來(lái)說(shuō)，activate是和template、data等屬性平級(jí)的一個(gè)屬性，形式是一個(gè)函數(shù)，函數(shù)里默認(rèn)有一個(gè)參數(shù)，而這個(gè)參數(shù)是一個(gè)函數(shù)，執(zhí)行這個(gè)函數(shù)時(shí)，才會(huì)切換組件。

為了證明他的延遲加載性，在服務(wù)器端我設(shè)置當(dāng)發(fā)起某個(gè)ajax請(qǐng)求時(shí)，會(huì)延遲2秒才返回內(nèi)容，因此，第一次切換組件2時(shí)，需要等待2秒才會(huì)成功切換：

 <div id="app">
 <button @click="toshow">點(diǎn)擊讓子組件顯示</button>
 <component v-bind:is="which_to_show"></component>
</div>
<script>
 var vm = new Vue({
 el: '#app',
 data: {
 which_to_show: "first"
 },
 methods: {
 toshow: function () { //切換組件顯示
 var arr = ["first", "second", "third", ""];
 var index = arr.indexOf(this.which_to_show);
 if (index < 3) {
  this.which_to_show = arr[index + 1];
 } else {
  this.which_to_show = arr[0];
 }
 console.log(this.$children);
 }
 },
 components: {
 first: { //第一個(gè)子組件
 template: "<div>這里是子組件1</div>"
 },
 second: { //第二個(gè)子組件
 template: "<div>這里是子組件2，這里是ajax后的內(nèi)容：{{hello}}</div>",
 data: function () {
  return {
  hello: ""
  }
 },
 activate: function (done) { //執(zhí)行這個(gè)參數(shù)時(shí)，才會(huì)切換組件
  var self = this;
  $.get("/test", function (data) { //這個(gè)ajax我手動(dòng)在服務(wù)器端設(shè)置延遲為2000ms，因此需要等待2秒后才會(huì)切換
  self.hello = data;
  done(); //ajax執(zhí)行成功，切換組件
  })
 }
 },
 third: { //第三個(gè)子組件
 template: "<div>這里是子組件3</div>"
 }
 }
 });
</script>

代碼效果：

【1】第一次切換到組件2時(shí)，需要等待2秒后才能顯示（因?yàn)榘l(fā)起ajax）；

【2】在有keep-alive的情況下，第二次或之后切換到組件2時(shí)，無(wú)需等待；但ajax內(nèi)容，需要在第一次發(fā)起ajax兩秒后才會(huì)顯示；

【3】在無(wú)keep-alive的情況下（切換掉后沒(méi)有保存在內(nèi)存中），第二次切換到組件2時(shí)，依然需要等待。

【4】等待時(shí)，不影響再次切換（即等待組件2的時(shí)候，再次點(diǎn)擊切換，可以直接切換到組件3）；

說(shuō)明：

【1】只有在第一次渲染組件時(shí)，才會(huì)執(zhí)行activate，且該函數(shù)只會(huì)執(zhí)行一次（在第一次組件出現(xiàn)的時(shí)候延遲組件出現(xiàn)）

【2】沒(méi)有keep-alive時(shí)，每次切換組件出現(xiàn)都是重新渲染（因?yàn)橹半[藏時(shí)執(zhí)行了destroy過(guò)程），因此會(huì)執(zhí)行activate方法。

⑤transition-mode過(guò)渡模式

簡(jiǎn)單來(lái)說(shuō)，動(dòng)態(tài)組件切換時(shí)，讓其出現(xiàn)動(dòng)畫效果。（還記不記得在過(guò)渡那一節(jié)的說(shuō)明，過(guò)渡適用于動(dòng)態(tài)組件）

默認(rèn)是進(jìn)入和退出一起完成；（可能造成進(jìn)入的內(nèi)容出現(xiàn)在退出內(nèi)容的下方，這個(gè)下方指y軸方面偏下的，等退出完畢后，進(jìn)入的才會(huì)出現(xiàn)在正確的位置）；

transition-mode=”out-in”時(shí)，動(dòng)畫是先出后進(jìn)；
transition-mode=”in-out”時(shí)，動(dòng)畫是先進(jìn)后出（同默認(rèn)情況容易出現(xiàn)的問(wèn)題）；

示例代碼：（使用自定義過(guò)渡名和animate.css文件）

<div id="app">
 <button @click="toshow">點(diǎn)擊讓子組件顯示</button>
 <component v-bind:is="which_to_show" class="animated" transition="bounce" transition-mode="out-in"></component>
</div>
<script>
 Vue.transition("bounce", {
 enterClass: 'bounceInLeft',
 leaveClass: 'bounceOutRight'
 })
 var vm = new Vue({
 el: '#app',
 data: {
 which_to_show: "first"
 },
 methods: {
 toshow: function () { //切換組件顯示
 var arr = ["first", "second", "third", ""];
 var index = arr.indexOf(this.which_to_show);
 if (index < 3) {
  this.which_to_show = arr[index + 1];
 } else {
  this.which_to_show = arr[0];
 }
 }
 },
 components: {
 first: { //第一個(gè)子組件
 template: "<div>這里是子組件1</div>"
 },
 second: { //第二個(gè)子組件
 template: "<div>這里是子組件2，這里是ajax后的內(nèi)容：{{hello}}</div>",
 data: function () {
  return {
  hello: ""
  }
 }
 },
 third: { //第三個(gè)子組件
 template: "<div>這里是子組件3</div>"
 }
 }
 });
</script>

本文已被整理到了《Vue.js前端組件學(xué)習(xí)教程》，歡迎大家學(xué)習(xí)閱讀。

關(guān)于vue.js組件的教程，請(qǐng)大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: