Vue組件及父子組件通信的示例分析

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

什么是組件？

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

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

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

使用組件的好處？

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

vue中的組件

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

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

注冊組件

全局注冊

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

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

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

在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

局部注冊

在組件實例中通過選項對象注冊，只在所注冊的作用域中使用

<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)前實例的作用域中才可以使用，在作用域中也可以復(fù)用，效果如下。

組件.png

父子組件間通信

父組件給子組件通信

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

組件實例的作用域是孤立的，不能再子組件直接用父組件的數(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;}

看如下案例，點擊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é)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。