這篇文章將為大家詳細(xì)講解有關(guān)Vue組件及父子組件通信的示例分析，小編覺得挺實(shí)用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

10年積累的網(wǎng)站制作、成都網(wǎng)站設(shè)計經(jīng)驗(yàn)，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識你，你也不認(rèn)識我。但先網(wǎng)站設(shè)計后付款的網(wǎng)站建設(shè)流程，更有金沙免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

什么是組件？

vue中的組件其實(shí)就是頁面組成的一部分，好比是電腦中的每一個元件（如硬盤，鍵盤，鼠標(biāo)），它就是一個具有獨(dú)立邏輯或界面，同時又能根據(jù)規(guī)定的接口規(guī)則進(jìn)行相互融合，變成一個完整的應(yīng)用。

頁面就是由一個個類似這樣的部分組成的，比如導(dǎo)航，列表，彈窗，下拉列表等。頁面只不過是這些組件的容器，組件自由組合形成功能完整的界面，當(dāng)不需要某個組件，或者想要替換某個組件時，可以隨時進(jìn)行替換和刪除，而不影響整個應(yīng)用的運(yùn)行。

前端組件化的核心思路就是將一個巨大復(fù)雜的東西拆分成顆粒度合理的小東西。

使用組件的好處？

1、提高開發(fā)效率
2、方便重復(fù)使用
3、簡化調(diào)試步驟
4、提升整個項(xiàng)目的可維護(hù)性
5、便于協(xié)同開發(fā)

vue中的組件

vue中的組件是一個自定義標(biāo)簽，vue.js的編譯器為它添加特殊功能
vue中的組件也可以擴(kuò)展原生的html元素，封裝可重用的代碼

組件的基本組成：樣式結(jié)構(gòu)，行為邏輯，數(shù)據(jù)

注冊組件

全局注冊

可以在任何模板中使用，使用之前要先注冊

語法：使用Vue.compontent(組件名，選項(xiàng)對象)

組件名命名約定：駝峰，烤串

在html中使用組件：使用烤串命名法

例如，注冊Vue.compontent('my-compontent',{}),使用的時候<my-compontent></my-compontent>

<div id="app">
    <h3>自定義下拉框</h3>
    <cus-list></cus-list>
    <cus-list></cus-list>
</div>
<script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script>
<script type="text/javascript">
  // 全局注冊組件
  Vue.component('cus-list',{
    data(){
      return {
        
      }
    },
    template:`
      <section>
        <div>
          <div>
            <input type="text">
            <input type="button" name="" value="">
            <span></span>
          </div>
        </div>
      </section>
    `
  })
  new Vue({
    el:"#app",
    data:{
      
    }
  })
</script>

使用的時候，只要在頁面上召喚這個組件就可使用，并且可以復(fù)用。

 

組件.png

局部注冊

在組件實(shí)例中通過選項(xiàng)對象注冊，只在所注冊的作用域中使用

<div id="app">
    <h3>自定義下拉框</h3>
    <cus-list></cus-list>
    <cus-list></cus-list>
</div>
<script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script>
<script>
  new Vue({
    el:"#app",
    components:{
      'cus-list':{
        template:`
          <section>
            <div>
              <div>
                <input type="text">
                <input type="button" name="" value="">
                <span></span>
              </div>
            </div>
          </section>
        `
      }
    },
    data:{
      
    }
  })
</script>

局部注冊的組件，只有在當(dāng)前實(shí)例的作用域中才可以使用，在作用域中也可以復(fù)用，效果如下。

 

組件.png

父子組件間通信

父組件給子組件通信

父組件===》子組件（用props）

組件實(shí)例的作用域是孤立的，不能再子組件直接用父組件的數(shù)據(jù)。

可以在組件上使用自定義屬性綁定數(shù)據(jù)，在組件中組要顯示的用props生命自定義屬性名。

也就是記住一句話，父組件給子組件傳值得時候，就是調(diào)用組件時給組件添加 一個屬性，然后在組件內(nèi)用props接收即可，組件內(nèi)根據(jù)屬性名即可使用。

<div id="app">
  <h3>自定義下拉框</h3>
  <cus-list btn-value="查詢"></cus-list>
  <cus-list btn-value="搜索"></cus-list>
</div>
<script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script>
<script>
  Vue.component('cus-list',{
    data(){

    },
    props:['btnValue'],
    template:`
      <section>
        <div>
          <div>
            <input type="text">
            <input type="button" name="" :value="btnValue">
            <span></span>
          </div>
        </div>
      </section>
    `
  })
  new Vue({
    el:"#app",
    data:{
      
    }
  })
</script>

頁面效果

 

props傳值.png

子組件給父組件通信

子組件===》父組件

需要用到自定義時間，父組件用$on監(jiān)聽自定義事件，$emit觸發(fā)父組件所關(guān)心的自定義事件。

1、在子組件中定義事件內(nèi)容<li v-for="item of list" @click="clickLi(item)">{{item}}</li>

2、父組件中v-on自定義事件進(jìn)行接收v-on:receive="changeValue"

3、在觸發(fā)子組件事件的時候，$emit 通知父組件 this.$emit("receive",item);

4、父組件根據(jù)自定義事件進(jìn)行相應(yīng)反饋changeValue:function(value){this.val = value;}

看如下案例，點(diǎn)擊input的時候，出現(xiàn)下拉列表框，選中相應(yīng)的列表，列表內(nèi)容出現(xiàn)在input框中。

  <div id="app">
    <h3>自定義下拉框</h3>
    <cus-list select-Value="搜索" v-bind:list="list1" >
    </cus-list>
  </div>
  <script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script>
  <script type="text/javascript">
  // 全局注冊組件
  Vue.component('cus-list',{
    data(){
      return {
        selectShow:false,
        val:''
      }
    },
    props:['selectValue','list'],
    template:`
      <section>
        <div>
          <div>
            <input type="text" @click="selectShow = !selectShow" :value="val">
            <input type="button" name="" :value="selectValue">
          </div>
          <list-li :list="list" v-show="selectShow" v-on:receive="changeValue"></list-li>
        </div>
      </section>
    `,
    methods:{
      changeValue:function(value){
        this.val = value;
      }
    }
  })
  Vue.component('list-li',{
    props:['list'],
    template:`
        <ul>
          <li v-for="item of list" @click="clickLi(item)">{{item}}</li>
        </ul>
    `,
    methods:{
      clickLi:function(item){
        this.$emit("receive",item);
      }
    }
  })
  new Vue({
    el:"#app",
    data:{
      list1:['宋仲基','余文樂','鹿晗','陳小春','黃曉明','易烊千璽']
    }
  })
  </script>

組件最基本的應(yīng)用就是如此，深入的應(yīng)用，就會發(fā)現(xiàn)很多剛好玩的東西。

關(guān)于“Vue組件及父子組件通信的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

分享名稱：Vue組件及父子組件通信的示例分析-創(chuàng)新互聯(lián)
文章URL：http://chinadenli.net/article6/eddig.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、品牌網(wǎng)站建設(shè)、移動網(wǎng)站建設(shè)、全網(wǎng)營銷推廣、云服務(wù)器、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)