vue組件學(xué)習(xí)教程

更新時(shí)間：2017年09月09日 13:40:35 作者：lychiyu

這篇文章主要為大家詳細(xì)介紹了vue組件學(xué)習(xí)教程，根據(jù)Vue官方文檔學(xué)習(xí)的筆記，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

在學(xué)習(xí)vue時(shí)，組件學(xué)習(xí)比較吃力，尤其是組件間的通信，所以總結(jié)一下，官方文檔的組件部分。

注冊(cè)組件

全局組件

語(yǔ)法如下，組件模板需要使用一個(gè)根標(biāo)簽包裹起來(lái)。data必須是一個(gè)方法

Vue.component('component-name',{
  template:'<div><h1>標(biāo)題</h1><span>作者信息</span></div>',
  data(){
    return{
      message:'組件的屬性'
    }
  },
  methods:{

  }
})

局部組件

var com = {
  template:'<div><h1>標(biāo)題</h1><span>作者信息</span></div>',
  data(){
    return{
      message:'組件的屬性'
    }
  },
  methods:{

  }
}

new Vue({
  components:{
    'compontent-name':com
  }
})

組件通信

prop將父組件數(shù)據(jù)傳給子組件

 <div id='app'>
   <child :msg=message></child>
 </div>

<script>
  Vue.component('child', {
    props: ['msg'],
    template: '<p>{{msg}}</p>'
  })

  new Vue({
    el: '#app',
    data: {
      message: '父組件數(shù)據(jù)'
    }
  })
</script>

利用子組件的props選項(xiàng)，父組件可以向子組件傳遞數(shù)據(jù)，但是子組件不能求改父組件的數(shù)據(jù)。

非父子組件通信

需要使用一個(gè)空的Vue實(shí)例來(lái)管理

<div id='app'>
  <com-a></com-a>
  <com-b></com-b>
</div>

var bus = new Vue();

var coma = {
  template: '<p @click="send">{{adata}}</p>',
  data(){
    return {
      adata: 'a的數(shù)據(jù)'
    }
  },
  methods:{
    send(){
      // 觸發(fā)這一事件
      bus.$emit('data-to-b', this.adata);
    }
  }
  
};

var comb= {
  template: '<p>{{bdata}}</p>',
  data(){
    return {
      bdata: 'b的數(shù)據(jù)'
    }
  },
  mounted(){
    // 監(jiān)聽(tīng)事件，獲取a組件的數(shù)據(jù)，進(jìn)行相關(guān)操作
    bus.$on('data-to-b', function (msg) {
      this.bdata = msg;
    }.bind(this));
  }
};

new Vue({
  el:'#app',
  components: {
    'com-a': coma,
    'com-b': comb
  }
})

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

您可能感興趣的文章:

vue
組件

相關(guān)文章

Vue2?中的數(shù)據(jù)劫持簡(jiǎn)寫(xiě)示例
這篇文章主要為大家介紹了Vue2?中的數(shù)據(jù)劫持簡(jiǎn)寫(xiě)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-02-02
vue-父子組件和ref實(shí)例詳解
這篇文章通過(guò)實(shí)例代碼給大家介紹了vue-父子組件傳值和ref獲取dom和組件的方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-11-11
bing Map 在vue項(xiàng)目中的使用詳解
這篇文章主要介紹了bing Map 在vue項(xiàng)目中的使用,需要的朋友可以參考下
2018-04-04
Vue?運(yùn)行高德地圖官方樣例,設(shè)置class無(wú)效的解決
這篇文章主要介紹了Vue?運(yùn)行高德地圖官方樣例,設(shè)置class無(wú)效的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
詳解基于vue-cli3.0如何構(gòu)建功能完善的前端架子
這篇文章主要介紹了詳解基于vue-cli3.0如何構(gòu)建功能完善的前端架子，本文整合出具備基礎(chǔ)功能的前端架子，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-10-10
詳解如何在Vue組件方法中加載和使用匿名函數(shù)
在Vue.js的開(kāi)發(fā)過(guò)程中,組件方法的定義和調(diào)用是非常常見(jiàn)的,有時(shí)候,為了響應(yīng)事件或其他操作,我們需要在組件的方法中使用匿名函數(shù),本文將深入探討如何在Vue組件的方法中加載和使用匿名函數(shù),并提供詳細(xì)的代碼示例和解釋,幫助開(kāi)發(fā)者更好地理解和應(yīng)用這些技術(shù)
2024-09-09
Vue開(kāi)發(fā)過(guò)程中遇到的疑惑知識(shí)點(diǎn)總結(jié)
vue是法語(yǔ)中視圖的意思，Vue.js是一個(gè)輕巧、高性能、可組件化的MVVM庫(kù)，同時(shí)擁有非常容易上手的API。下面這篇文章主要給大家總結(jié)了Vue在開(kāi)發(fā)過(guò)程中遇到的疑惑知識(shí)點(diǎn),有需要的朋友可以參考借鑒，下面來(lái)一起看看吧。
2017-01-01
vue實(shí)現(xiàn)導(dǎo)出excel的多種方式總結(jié)
在Vue中實(shí)現(xiàn)導(dǎo)出Excel有多種方式,可以通過(guò)前端實(shí)現(xiàn),也可以通過(guò)前后端配合實(shí)現(xiàn),這篇文章將為大家詳細(xì)介紹幾種常用的實(shí)現(xiàn)方式,需要的可以參考下
2023-08-08
Vue3+echarts5踩坑以及resize方法報(bào)錯(cuò)的解決
這篇文章主要介紹了Vue3+echarts5踩坑以及resize方法報(bào)錯(cuò)的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-07-07
vue項(xiàng)目純前端實(shí)現(xiàn)的模板打印功能示例代碼
在Vue項(xiàng)目中,通過(guò)使用vue-print-nb插件,可以實(shí)現(xiàn)頁(yè)面的打印功能,這篇文章主要介紹了vue項(xiàng)目純前端實(shí)現(xiàn)的模板打印功能的相關(guān)資料,需要的朋友可以參考下
2024-10-10