動(dòng)態(tài)組件使用

寵來(lái)也發(fā)布于2019-08-29 12:16 / 895人閱讀

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

動(dòng)態(tài)組件使用

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

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

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

也可以直接綁定到組件對(duì)象上：

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

實(shí)際項(xiàng)目開(kāi)發(fā)中

引入組件

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

動(dòng)態(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 = "請(qǐng)?zhí)顚?xiě)拒絕的原因";
      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動(dòng)態(tài)組件父子組件-動(dòng)態(tài)渲染動(dòng)態(tài)添加組件微信泛型動(dòng)態(tài)添加組件c

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

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

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

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

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

eccozhou 2019-08-22 15:25 評(píng)論0 收藏0