怎么在Vue中創(chuàng)建組件和傳值？針對(duì)這個(gè)問(wèn)題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問(wèn)題的小伙伴找到更簡(jiǎn)單易行的方法。

創(chuàng)新互聯(lián)網(wǎng)站建設(shè)由有經(jīng)驗(yàn)的網(wǎng)站設(shè)計(jì)師、開(kāi)發(fā)人員和項(xiàng)目經(jīng)理組成的專(zhuān)業(yè)建站團(tuán)隊(duì)，負(fù)責(zé)網(wǎng)站視覺(jué)設(shè)計(jì)、用戶體驗(yàn)優(yōu)化、交互設(shè)計(jì)和前端開(kāi)發(fā)等方面的工作，以確保網(wǎng)站外觀精美、成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)易于使用并且具有良好的響應(yīng)性。

## 創(chuàng)建組件的3種方法

# 第一種:
 + Vue.extend()函數(shù)返回一個(gè)組件的構(gòu)造器,里面包含一個(gè)參數(shù),參數(shù)是對(duì)象,對(duì)象里面是一些配置項(xiàng)
+ Vue.component()函數(shù)利用Vue.extend()返回的構(gòu)造器創(chuàng)建一個(gè)組件的實(shí)例,有兩個(gè)參數(shù).;
參數(shù)1:組件名字,參數(shù)2:組件構(gòu)造器

 注意:
      模板template中只能有一個(gè)根節(jié)點(diǎn)

    組建的名字采用駝峰命名的話,使用時(shí),就要加上"-"; 例如:組件名字indexA-->index-a;

## 第二種:
 + Vue.component('indexB',{模板})

## 第三種:
 + 通過(guò)制定模板創(chuàng)建,在Vue管轄范圍之外定義模板

## 總結(jié):
 + 先制造一個(gè)模板,在創(chuàng)建組件

## 組件中使用指令:
 + 在Vue.component()里邊,有template模板,有data()函數(shù),有methods()方法
+ 注意:data()必須是一個(gè)個(gè)函數(shù).不能使用屬性定義;函數(shù)里邊return出去一個(gè)對(duì)象

## 父組件傳值給子組件的方法

* 先創(chuàng)建好父組件和子組件
* 在父組件的模板中的son,子組件標(biāo)簽里綁定 :屬性 = 父組件需要傳遞的數(shù)據(jù);
 * 在子組件的son{}中  使用props來(lái)接收父組件傳遞過(guò)來(lái)的數(shù)據(jù);
 * props后跟一個(gè)數(shù)組,數(shù)組中是一個(gè)個(gè)字符串,這些字符串可以當(dāng)成屬性使用,即props:['屬性名']

 * 代碼如下:

    *

Vue.component('father',{
    template:'<div>....<son :myName="mySonName"></son></div>',
    data(){
      return{
        mySonName:'小明'
      }
    },
    //子組件
    components:{
      son:{
        props:['myName'],
        template:'...{{myName}}'
      }
    }
  })

 ## 子組件傳值給父組件的方法
* 先創(chuàng)建好父組件和子組件;

* 在子組件methods方法中使用this.$emit()方法,
     * 這個(gè)方法有兩個(gè)參數(shù);參數(shù)1:需要與父組件交換事件名稱(chēng),參數(shù)2:要傳遞的數(shù)據(jù);

* 在父組件模板的son標(biāo)簽中使用方法名的傳遞:

即,@tellFatherMyname = "getMySonName";

* 在父組件的methods方法中傳入data參數(shù),這個(gè)data=子組件傳遞過(guò)來(lái)的數(shù)據(jù),然后讓mySonName = data;*

代碼如下:     

<div id="app">
    <father></father>
  </div>
  <script>
    Vue.component('father',{
      template:`<div>
      <p>我的兒子告訴我他叫{{mySonName}}</p>
      <son @tellFatherMyname="getMySonName"></son>
      </div>`,
      data(){
        return {
          mySonName:'???'
        }
      },
      methods:{
        getMySonName(data){
          console.log(data);
          this.mySonName = data;
        }
      },
      components: {
        son:{
          data(){
            return {
            myName :'小明'
            }
          },
          template:`
              <button @click = "emitMyname">點(diǎn)擊就告訴父親我叫{{myName}}          
              </button>`,
          //在子組件的methods中使用this.$emit()來(lái)傳遞值;
          //$emit()有2個(gè)參數(shù);參數(shù)1:需要交換的事件名,參數(shù)2:要傳遞的數(shù)據(jù);例 
            如:this.name
          methods:{
            emitMyname(){
              this.$emit('tellFatherMyname',this.myName)
            }
          }
        }
      }
    })
    var vm = new Vue({
      el:'#app',
      data:{
      }
    })
  </script>

### 兄弟組件的創(chuàng)建和傳值:

 * 創(chuàng)建兄弟組建時(shí),先創(chuàng)建好父組件,然后在子組件中創(chuàng)建son組件 和 daughter組件;
 * 接下來(lái)是 son組件 和daughter組件之間傳值;
 *  dau --> son傳值

* 在dau中 先通過(guò)事件總線發(fā)射一個(gè)事件名稱(chēng)和要傳遞的數(shù)據(jù);即eventbus.$emit('事件名稱(chēng)','數(shù)據(jù)')
     *  事件總線:

var eventbus = new Vue();

* 在 son 中先寫(xiě)一個(gè)鉤子函數(shù),再通過(guò)eventbus.$on('事件名稱(chēng)',data=>{})方法去監(jiān)聽(tīng),接收兄弟節(jié)點(diǎn)發(fā)射過(guò)來(lái)的事件
*  $on()有兩個(gè)參數(shù),參數(shù)1:事件名稱(chēng);參數(shù)2:函數(shù),函數(shù)的默認(rèn)值是傳遞過(guò)來(lái)的數(shù)據(jù)* 代碼如下:
     * 

<div id="app">
    <!-- 在此處渲染到頁(yè)面上 -->
    <father></father>
  </div>
  <script>
    //先創(chuàng)建一個(gè)vue空實(shí)例,作為事件總線
    var eventbus = new Vue();
    Vue.component('father',{
      //組件顯示的模板
      template:`<div>
            <son></son>
            <daughter></daughter>
          </div>`,
      components: {
        son:{
          data(){
           return {
            mySisterName:'???'
           }
          },
          //組件顯示的模板
          template:'<p>我的妹妹告訴我她叫{{mySisterName}}</p>',
          //采用鉤子函數(shù)
          //在鉤子函數(shù)中通過(guò)eventbus.$on('同一個(gè)事件名稱(chēng)',data)來(lái)接收傳遞過(guò)來(lái)的數(shù)據(jù)
          mounted(){
            eventbus.$on('tellBroMyName',data=>{
              this.mySisterName = data;
            })
          }
        },
        daughter:{
          data(){
           return {
            myName:'蘭蘭'
           }
          },
          template:'<button @click="emitMyName">點(diǎn)擊就告訴哥哥我叫{{myName}}</button>',
          methods:{
            //只要點(diǎn)擊按鈕,就將事件和數(shù)據(jù)一起傳遞過(guò)去
            emitMyName(){
              eventbus.$emit('tellBroMyName',this.myName)
            }
          }
        }
      }
    })
    var vm = new Vue({
      el:'#app',
      data:{
      }
    })
  </script>

Vue的優(yōu)點(diǎn)

Vue具體輕量級(jí)框架、簡(jiǎn)單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運(yùn)行速度快等優(yōu)勢(shì)，Vue中頁(yè)面使用的是局部刷新，不用每次跳轉(zhuǎn)頁(yè)面都要請(qǐng)求所有數(shù)據(jù)和dom，可以大大提升訪問(wèn)速度和用戶體驗(yàn)。

關(guān)于怎么在Vue中創(chuàng)建組件和傳值問(wèn)題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒(méi)有解開(kāi)，可以關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道了解更多相關(guān)知識(shí)。

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

分享文章：怎么在Vue中創(chuàng)建組件和傳值-創(chuàng)新互聯(lián)
當(dāng)前鏈接：http://www.chinadenli.net/article6/djogog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信公眾號(hào)、自適應(yīng)網(wǎng)站、網(wǎng)站建設(shè)、App開(kāi)發(fā)、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站改版

廣告

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