精品专区-精品自拍9-精品自拍三级乱伦-精品自拍视频-精品自拍视频曝光-精品自拍小视频

<strike id="q8uee"></strike>

13518219792

NEWS

網站建設資訊

Vue.js組件高級特性有哪些用法

這篇文章主要介紹了Vue.js組件高級特性有哪些用法，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都創新互聯公司致力于互聯網網站建設與網站營銷，提供成都網站設計、成都網站建設、網站開發、seo優化、網站排名、互聯網營銷、微信小程序、公眾號商城、等建站開發，成都創新互聯公司網站建設策劃專家，為不同類型的客戶提供良好的互聯網應用定制解決方案，幫助客戶在新的全球化互聯網環境中保持優勢。

具體如下：

1 遞歸

為組件設置 name屬性，這個組件就可以在自身的模板內遞歸調用自己。

html：

js：

Vue.component('deniro-component',{
  name:'deniro-component',
  props:{
    count:{
      type:Number,
      default:1
    }
  },
  template:'\
  \
  
{{count}} 微信大變樣!看了這些新功能后，網友淡定不住了
\
    \
  

\   ' }); var app = new Vue({   el: '#app',   data: {} });

效果：

渲染結果：

可以利用組件的可遞歸特性，來實現一些具有不確定層級的組件，比如級聯選擇器和樹型組件。

2 內聯模板

一般情況下，組件的模板都是在 template 中定義的。我們也可以在組件標簽中加上 inline-template 屬性，這樣組件就會把它的內容作為實際的模板內容。

內聯模板可以接收父、子組件中聲明的數據，所以更加靈活。

html：

  
    

      
父組件中定義子組件模板
      
{{content1}}
      
{{content2}}
    
  

js：

Vue.component('deniro-component2',{
  data:function () {
    return {
      content1:'雙屏手機一碰就碎？實測結果意外（來源于子組件）'
    }
  }
});
var app2 = new Vue({
  el: '#app2',
  data: {
    content2:'AI正在改變所有行業 咖啡也將被消滅（來源于父組件）'
  }
});

渲染結果：

 

  
父組件中定義子組件模板
  
雙屏手機一碰就碎？實測結果意外（來源于子組件）
  
AI正在改變所有行業 咖啡也將被消滅（來源于父組件）
 

如果父子組件定義的數據同名，那么優先使用子組件中的數據。

因為作用域較難理解，所以除非必要，否則不建議使用。

3 動態加載

我們可以使用 is 來實現動態掛載組件。

html：

  
  切換到 A 組件
  切換到 B 組件
  切換到 C 組件

js：

var app3 = new Vue({
  el: '#app3',
  components: {
    componentA: {
      template: '
組件 A
'
    },
    componentB: {
      template: '
組件 B
'
    },
    componentC: {
      template: '
組件 C
'
    }
  },
  data: {
    currentView: 'componentA'
  },
  methods: {
    change: function (component) {
      this.currentView = 'component' + component;
    }
  }
});

效果：

data 中的 is 變量也可以直接綁定組件對象。

html：

js：

var news={
  template:'
無人機送快遞 漸行漸近
'
}
var app4 = new Vue({
  el: '#app4',
  data: {
    currentView: news
  }
});

渲染結果：

 
無人機送快遞 漸行漸近

4 異步加載

當工程變得越來越大時，就需要考慮性能嘍。我們可以把組件定義成一個工廠函數，實現組件動態解析。Vue.js 會把本次渲染后的結果緩存起來，從而提高性能。

html：

js：

Vue.component('deniro-component5', function (resolve,reject) {
  window.setTimeout(function () {
    resolve({
      template:'
全球首個5G電話撥通
'
    });
  },1000);
});
var app5 = new Vue({
  el: '#app5'
});

效果：

這里使用 setTimeout 來模擬異步下載，下載成功后會調用 resolve 方法。

一般情況下，會把組件的配置定義為對象配置，然后通過 Ajax 請求組件配置信息，最后通過 resolve 傳入這些配置。

完整實例代碼：

  


  
    

      
父組件中定義子組件模板
      
{{content1}}
      
{{content2}}
    
  


  
  切換到 A 組件
  切換到 B 組件
  切換到 C 組件


  


  

感謝你能夠認真閱讀完這篇文章，希望小編分享的“Vue.js組件高級特性有哪些用法”這篇文章對大家有幫助，同時也希望大家多多支持創新互聯，關注創新互聯行業資訊頻道，更多相關知識等著你來學習!