在Vue2.0中如何實現組件及父子組件通信

本篇文章主要介紹了Vue2.0學習之詳解Vue 組件及父子組件通信，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧

什麼是元件？

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

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

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

使用元件的好處？

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

vue中的元件

vue中的元件是自訂標籤，vue.js的編譯器為它新增特殊功能
vue中的元件也可以擴充原生的html元素，封裝可重複使用的程式碼

元件的基本組成：樣式結構，行為邏輯，資料

註冊元件

全域註冊

可以在任何範本中使用，使用之前要先註冊

語法：使用Vue.compontent(元件名，選項物件)

元件名稱命名約定：駝峰，烤串

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

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

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

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

 

元件.png

局部註冊

在元件實例中透過選項物件註冊，只在所在註冊的作用域中使用

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

局部註冊的元件，只有在目前實例的作用域中才可以使用，在作用域中也可以重複使用，效果如下。

 

元件.png

父子元件間通訊

父元件給子元件通訊

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

元件實例的作用域是孤立的，不能再子元件直接用父元件的資料。

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

也就是記住一句話，父元件給子元件傳值得時候，就是在呼叫元件時為元件加上一個屬性，然後在元件內用props接收即可，元件內依照屬性名稱即可使用。

<p id="app">
  <h2 id="自定义下拉框">自定义下拉框</h2>
  <cus-list btn-value="查询"></cus-list>
  <cus-list btn-value="搜索"></cus-list>
</p>
<script type="text/javascript" src=&#39;https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js&#39;></script>
<script>
  Vue.component(&#39;cus-list&#39;,{
    data(){

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

頁面效果

 

props傳值.png

子元件給父元件通訊

#子元件===》父元件

需要用到自訂時間，父元件用$on監聽自訂事件，$emit觸發父元件所關心的自訂事件。

1、在子元件中定義事件內容

{{item}}

2、父元件中v-on自訂事件進行接收v-on:receive="changeValue"

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

4、父元件根據自訂事件進行對應回饋changeValue:function(value){this.val = value;}

看如下案例，點選input的時候，出現下拉列錶框，選取對應的列表，列表內容出現在input框中。

  <p id="app">
    <h2 id="自定义下拉框">自定义下拉框</h2>
    <cus-list select-Value="搜索" v-bind:list="list1" >
    </cus-list>
  </p>
  <script type="text/javascript" src=&#39;https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js&#39;></script>
  <script type="text/javascript">
  // 全局注册组件
  Vue.component(&#39;cus-list&#39;,{
    data(){
      return {
        selectShow:false,
        val:&#39;&#39;
      }
    },
    props:[&#39;selectValue&#39;,&#39;list&#39;],
    template:`
      <section>
        <p>
          <p>
            <input type="text" @click="selectShow = !selectShow" :value="val">
            <input type="button" name="" :value="selectValue">
          </p>
          <list-li :list="list" v-show="selectShow" v-on:receive="changeValue"></list-li>
        </p>
      </section>
    `,
    methods:{
      changeValue:function(value){
        this.val = value;
      }
    }
  })
  Vue.component(&#39;list-li&#39;,{
    props:[&#39;list&#39;],
    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:[&#39;宋仲基&#39;,&#39;余文乐&#39;,&#39;鹿晗&#39;,&#39;陈小春&#39;,&#39;黄晓明&#39;,&#39;易烊千玺&#39;]
    }
  })
  </script>

上面是我整理給大家的，希望今後會對大家有幫助。

相關文章：

在Django與Vue語法中存在衝突問題如何解決

在nodejs中如何實作爬取網站圖片

有關ES6/JavaScript使用技巧（詳細教學）

#使用微信小程式如何實作動態設定placeholder提示文字

以上是在Vue2.0中如何實現組件及父子組件通信的詳細內容。更多資訊請關注PHP中文網其他相關文章！