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

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

什么是組件？

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

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

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

使用組件的好處？

1、提高開發效率
2、方便重復使用
3、簡化調試步驟
4、提升整個項目的可維護性
5、便于協同開發

vue中的組件

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

組件的基本組成：樣式結構，行為邏輯，數據

注冊組件

全局注冊

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

語法：使用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>

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

組件.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>

局部注冊的組件，只有在當前實例的作用域中才可以使用，在作用域中也可以復用，效果如下。

組件.png

父子組件間通信

父組件給子組件通信

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

組件實例的作用域是孤立的，不能再子組件直接用父組件的數據。

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

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

<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監聽自定義事件，$emit觸發父組件所關心的自定義事件。

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

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

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

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

看如下案例，點擊input的時候，出現下拉列表框，選中相應的列表，列表內容出現在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>

組件最基本的應用就是如此，深入的應用，就會發現很多剛好玩的東西。

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