動態(tài)組件使用

Faremax 發(fā)布于2019-08-01 16:34 / 2309人閱讀

摘要：動態(tài)組件使用動態(tài)組件官網(wǎng)解釋通過使用保留的元素，動態(tài)地綁定到它的特性，我們讓多個組件可以使用同一個掛載點，并動態(tài)切換組件在變化時改變也可以直接綁定到組件對象上實際項目開發(fā)中引入組件動態(tài)組件綁定參數(shù)顯示組件審批拒絕請?zhí)顚懢芙^的原

動態(tài)組件使用

動態(tài)組件官網(wǎng)解釋

通過使用保留的元素，動態(tài)地綁定到它的 is 特性，我們讓多個組件可以使用同一個掛載點，并動態(tài)切換：

var vm = new Vue({
 el: "#example",
 data: {
   currentView: "home"
 },
 components: {
   home: { /* ... */ },
   posts: { /* ... */ },
   archive: { /* ... */ }
 }
})

也可以直接綁定到組件對象上：

var Home = {
 template: "Welcome home!"
}
var vm = new Vue({
 el: "#example",
 data: {
   currentView: Home
 }
})

實際項目開發(fā)中

引入組件

import submitmodal from "../components/SubmitModal";

動態(tài)組件 :is 綁定

data參數(shù)

  submitModal: {
        title: "",
        show: false,
        hasInput: false,
        showError: false,
        text: "",
        type: "",
        onOk: function() {}
      },
      currentView: ""

4.顯示組件

      let self = this;
      self.submitModal.show = true;
      self.submitModal.title = "審批拒絕";
      self.submitModal.type = "delete";
      self.submitModal.hasInput = true;
      self.submitModal.text = "請?zhí)顚懢芙^的原因";
      self.submitModal.onOk = makeFail;
      self.currentView = "";
      setTimeout(() => {
        self.currentView = "submitmodal";
      }, 1);

關(guān)閉組件

on-ok

self.submitModal.show = false;
            item.hideOrder = true;
            setTimeout(function() {
              self.submitModal.input = "";
            }, 200);
            setTimeout(function() {
              self.submitModal.showError = false;
            }, 400);

on-close

closesubmitModal: function() {
  this.currentView = "";
  this.submitModal.input = "";
  this.submitModal.show = false;
}

GPU云服務(wù)器云服務(wù)器 vuejs動態(tài)組件父子組件-動態(tài)渲染動態(tài)添加組件微信泛型動態(tài)添加組件c

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/50604.html

相關(guān)文章

[譯] 關(guān)于 Angular 動態(tài)組件你需要知道的

摘要：第一種方式是使用模塊加載器，如果你使用加載器的話，路由在加載子路由模塊時也是用的作為模塊加載器。還需注意的是，想要使用還需像這樣去注冊它你當(dāng)然可以在里使用任何標(biāo)識，不過路由模塊使用標(biāo)識，所以最好也使用相同。原文鏈接：Here is what you need to know about dynamic components in?Angular showImg(https://se...

lcodecorex 2019-08-26 11:53 評論0 收藏0
Angular 2.x+ 如何動態(tài)裝載組件

摘要：如何動態(tài)裝載組件在中我們可以使用方法編譯模板達(dá)到動態(tài)加載組件的目的，然而在中則沒有那么簡單，下面的例子即為動態(tài)加載廣告組件的過程。是創(chuàng)建動態(tài)組件較好的選擇，因為它不會渲染多余的輸出。 Angular 2.x+ 如何動態(tài)裝載組件在 Angular 1.x 中我們可以使用 $compile 方法編譯模板達(dá)到動態(tài)加載組件的目的，然而在 ng2 中則沒有那么簡單，下面的例子即為動態(tài)加載廣告組...

Yi_Zhi_Yu 2019-08-20 16:45 評論0 收藏0
Vue動態(tài)組件和異步組件

摘要：動態(tài)組件如果我們打算在一個地方根據(jù)不同的狀態(tài)引用不同的組件的話，比如頁，那么給我們提供動態(tài)組件。實現(xiàn)動態(tài)組件的加載。的值可以是一個已經(jīng)注冊的組件的名字或者一個組件的選對象。動態(tài)組件如果我們打算在一個地方根據(jù)不同的狀態(tài)引用不同的組件的話，比如tab頁，那么Vue給我們提供動態(tài)組件。基本使用 Parent.vue {{btn.name}} ...

nanchen2251 2019-08-23 14:57 評論0 收藏0
使用form-create動態(tài)生成vue組件,支持json格式

摘要：說明文檔示例商品名稱商品加個創(chuàng)建時間是否顯示顯示不顯示通過建立一個虛擬的方式生成自定義組件生成上面的代碼是通過生成器動態(tài)生成一個正在加載的按鈕組件上面的代碼是通過方式動態(tài)生成一個按鈕組件修改可以通過一下兩種方式動態(tài)修改組件的配置項通 [github] | [說明文檔] 示例 showImg(https://segmentfault.com/img/remote/1460000017...

happyhuangjinjin 2019-08-23 14:48 評論0 收藏0
Angular4 動態(tài)加載組件雜談

摘要：最近接手了一個項目，客戶提出了一個高大上的需求要求只有一個主界面，所有組件通過來顯示。最近接手了一個項目，客戶提出了一個高大上的需求：要求只有一個主界面，所有組件通過Tab來顯示。其實這個需求并不詭異，不喜歡界面跳轉(zhuǎn)的客戶都非常熱衷于這種展現(xiàn)形式。好吧，客戶至上，搞定它！這種實現(xiàn)方式在傳統(tǒng)的HTML應(yīng)用中，非常簡單，只是在這Angular4（以下簡稱ng）中，咋個弄呢？我們先來了...

testHs 2019-08-20 17:49 評論0 收藏0
組件(6)：動態(tài)組件

摘要：組件的動態(tài)切換父組件可以通過元素，在其特性上綁定一個屬性，該屬性的值表示了一個子組件，可以是一個對象，或字符串子組件名稱。可以發(fā)現(xiàn)，使用屬性觀察可用組件個數(shù)時始終不超過，這是因為每次切換，舊的組件將被直接移除，下次切換時要重新渲染。組件的動態(tài)切換父組件可以通過元素，在其特性is上綁定一個屬性，該屬性的值表示了一個子組件，可以是一個對象，或字符串（子組件名稱）。頁面綁定：父組件組件...

eccozhou 2019-08-22 15:25 評論0 收藏0