Vue.js動態(tài)組件解析

更新時間：2016年09月09日 09:12:47 作者：qq20004604

這篇文章主要為大家詳細(xì)介紹了Vue.js動態(tài)組件，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本篇資料來于官方文檔：http://cn.vuejs.org/guide/components.html#u52A8_u6001_u7EC4_u4EF6

本文是在官方文檔的基礎(chǔ)上，更加細(xì)致的說明，代碼更多更全。
簡單來說，更適合新手閱讀

①簡單來說：

就是幾個組件放在一個掛載點下，然后根據(jù)父組件的某個變量來決定顯示哪個，或者都不顯示。

②動態(tài)切換：

在掛載點使用component標(biāo)簽，然后使用v-bind:is=”組件名”，會自動去找匹配的組件名，如果沒有，則不顯示；

改變掛載的組件，只需要修改is指令的值即可。

如示例代碼：

 <div id="app">
 <button @click="toshow">點擊讓子組件顯示</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: { //第一個子組件
 template: "<div>這里是子組件1</div>"
 },
 second: { //第二個子組件
 template: "<div>這里是子組件2</div>"
 },
 third: { //第三個子組件
 template: "<div>這里是子組件3</div>"
 },
 }
 });
</script>

說明：

點擊父組件的按鈕，會自動切換顯示某一個子組件（根據(jù)which_to_show這個變量的值來決定）。

③keep-alive

簡單來說，被切換掉（非當(dāng)前顯示）的組件，是直接被移除了。

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

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

如代碼：

 <div id="app">
 <button @click="toshow">點擊讓子組件顯示</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: { //第一個子組件
 template: "<div>這里是子組件1</div>"
 },
 second: { //第二個子組件
 template: "<div>這里是子組件2</div>"
 },
 third: { //第三個子組件
 template: "<div>這里是子組件3</div>"
 },
 }
 });
</script>

說明：

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

之后無論如何切換，將一直保持有三個元素。

④activate鉤子

簡單來說，他是延遲加載。

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

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

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

 <div id="app">
 <button @click="toshow">點擊讓子組件顯示</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: { //第一個子組件
 template: "<div>這里是子組件1</div>"
 },
 second: { //第二個子組件
 template: "<div>這里是子組件2，這里是ajax后的內(nèi)容：{{hello}}</div>",
 data: function () {
  return {
  hello: ""
  }
 },
 activate: function (done) { //執(zhí)行這個參數(shù)時，才會切換組件
  var self = this;
  $.get("/test", function (data) { //這個ajax我手動在服務(wù)器端設(shè)置延遲為2000ms，因此需要等待2秒后才會切換
  self.hello = data;
  done(); //ajax執(zhí)行成功，切換組件
  })
 }
 },
 third: { //第三個子組件
 template: "<div>這里是子組件3</div>"
 }
 }
 });
</script>

代碼效果：

【1】第一次切換到組件2時，需要等待2秒后才能顯示（因為發(fā)起ajax）；

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

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

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

說明：

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

【2】沒有keep-alive時，每次切換組件出現(xiàn)都是重新渲染（因為之前隱藏時執(zhí)行了destroy過程），因此會執(zhí)行activate方法。

⑤transition-mode過渡模式

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

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

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

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

<div id="app">
 <button @click="toshow">點擊讓子組件顯示</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: { //第一個子組件
 template: "<div>這里是子組件1</div>"
 },
 second: { //第二個子組件
 template: "<div>這里是子組件2，這里是ajax后的內(nèi)容：{{hello}}</div>",
 data: function () {
  return {
  hello: ""
  }
 }
 },
 third: { //第三個子組件
 template: "<div>這里是子組件3</div>"
 }
 }
 });
</script>

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

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

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

您可能感興趣的文章: