動態組件使用

chnmagnus 發布于2019-08-20 15:21 / 2174人閱讀

摘要：動態組件使用動態組件官網解釋通過使用保留的元素，動態地綁定到它的特性，我們讓多個組件可以使用同一個掛載點，并動態切換組件在變化時改變也可以直接綁定到組件對象上實際項目開發中引入組件動態組件綁定參數顯示組件審批拒絕請填寫拒絕的原

動態組件使用

動態組件官網解釋

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

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
 }
})

實際項目開發中

引入組件

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

動態組件 :is 綁定

data參數

  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 = "請填寫拒絕的原因";
      self.submitModal.onOk = makeFail;
      self.currentView = "";
      setTimeout(() => {
        self.currentView = "submitmodal";
      }, 1);

關閉組件

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云服務器 vuejs動態組件父子組件-動態渲染動態添加組件微信泛型動態添加組件c

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/82192.html

[譯] 關于 Angular 動態組件你需要知道的

摘要：第一種方式是使用模塊加載器，如果你使用加載器的話，路由在加載子路由模塊時也是用的作為模塊加載器。還需注意的是，想要使用還需像這樣去注冊它你當然可以在里使用任何標識，不過路由模塊使用標識，所以最好也使用相同。原文鏈接：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+ 如何動態裝載組件

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

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

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

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

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

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

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

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

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

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