欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue2.0學(xué)習(xí)之詳解Vue 組件及父子組件通信

 更新時(shí)間：2017年12月12日 09:41:22   作者：范小飯_  
本篇文章主要介紹了Vue2.0學(xué)習(xí)之詳解Vue 組件及父子組件通信，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

什么是組件？

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

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

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

使用組件的好處？

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

vue中的組件

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

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

注冊(cè)組件

全局注冊(cè)

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

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

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

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

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

<div id="app">
    <h2>自定義下拉框</h2>
    <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">
  // 全局注冊(cè)組件
  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>

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

 

組件.png

局部注冊(cè)

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

<div id="app">
    <h2>自定義下拉框</h2>
    <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>

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

 

組件.png

父子組件間通信

父組件給子組件通信

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

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

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

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

<div id="app">
  <h2>自定義下拉框</h2>
  <cus-list btn-value="查詢(xún)"></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>

頁(yè)面效果

 

props傳值.png

子組件給父組件通信

子組件===》父組件

需要用到自定義時(shí)間，父組件用$on監(jiān)聽(tīng)自定義事件，$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ā)子組件事件的時(shí)候，$emit 通知父組件 this.$emit("receive",item);

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

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

  <div id="app">
    <h2>自定義下拉框</h2>
    <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">
  // 全局注冊(cè)組件
  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:['宋仲基','余文樂(lè)','鹿晗','陳小春','黃曉明','易烊千璽']
    }
  })
  </script>

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

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

相關(guān)文章

最新評(píng)論