本文章向大家介紹怎么在vue中實現(xiàn)一個父子通訊功能的基本知識點總結(jié)和需要注意事項，具有一定的參考價值，需要的朋友可以參考一下。

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項目有：申請域名、虛擬主機、營銷軟件、網(wǎng)站建設(shè)、大竹網(wǎng)站維護、網(wǎng)站推廣。

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創(chuàng)建可維護性和可測試性更強的代碼庫，Vue允許可以將一個網(wǎng)頁分割成可復(fù)用的組件，每個組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網(wǎng)頁中相應(yīng)的地方，所以越來越多的前端開發(fā)者使用vue。

父組件

<!--下拉框父組件-->
<template>
 <div id="app">
  <oSelect @changeOption="onChangeOption" :selectData="selectData"></oSelect>
  <!--
  selectData: 傳入父組件需要傳入的數(shù)據(jù)；格式:childDataName="parentDataName";
  onChangeOption： 子組件觸發(fā)的事件名，通過觸發(fā)一個事件從而來接收子組件的傳過來的數(shù)據(jù)
  格式：@childEventName="parentEventName"
  注：可寫多個
  -->
 </div>
</template>
<script>
import oSelect from "@/components/select.vue"; //引入組件
export default{
 name: 'App',
 data(){
  return {
   selectData: {
    defaultIndex: 0, //默認(rèn)選中的是第幾個
    selectStatus: false, // 通過selectStatus來控制下拉框的顯示/隱藏
    selectOptions: [ // 下拉框中的數(shù)據(jù) name這樣的參數(shù)，看項目是否有需求，可自行修改
     {
      name: 'time',
      context: '按時間排序'
     },
     {
      name: 'view',
      context: '按瀏覽量排序'
     },
     {
      name: 'like',
      context: '按點贊數(shù)排序'
     },
     {
      name: 'reply',
      context: '按回復(fù)數(shù)排序'
     },
     {
      name: 'reward',
      context: '按打賞數(shù)排序'
     }
    ]
   }
  }
 },
 methods:{
  onChangeOption(index){
  //子組件通過一個事件來觸發(fā)onChangeOption方法，從而傳遞一系列參數(shù)，這里的index就是傳過來的
   this.selectData.defaultIndex = index;
  //觸發(fā)過后，動態(tài)改變了需要值 
  }
 },
 components: {
  oSelect,
  //注冊組件
 }
}
</script>

子組件

<template>
<!-- 下拉框組件html結(jié)構(gòu)（子組件） -->
<div class="select-box" @click="changeStatus">
<!-- changeStatus事件: 點擊實現(xiàn)下拉框的顯示和隱藏 -->
<h4 class="select-title"
 :name="selectData.selectOptions[selectData.defaultIndex].name"
 :class="{'select-title-active': selectData.selectStatus}"> 
 <!--屬性name class的動態(tài)綁定-->
 {{ selectData.selectOptions[selectData.defaultIndex].context }} 
 <!--這里主要綁定選擇的數(shù)據(jù)-->
</h4>
<transition name="slide-down">
<!--transition 實現(xiàn)下拉列表顯示隱藏時的動畫-->
<ul class="select-options" v-show="selectData.selectStatus">
 <li class="select-option-item" 
  v-for="(item,index) in selectData.selectOptions"
  @click="EmitchangeOption(index)"
  :class="{'select-option-active':selectData.defaultIndex===index}">
  <!--
   v-for：循環(huán)數(shù)據(jù)渲染下拉列表
   EmitchangeOption：點擊下拉列表事件
   class：動態(tài)綁定被選中的數(shù)據(jù)
  -->
  {{ selectData.selectOptions[index].context }}
  
 </li>
 <div class="arrow-top"></div>
</ul> 
</transition> 
</div> 
</template>
<script>
export default{
 name: 'oSelect', //建議大家都寫上這個，有利于我們知道這個組件叫什么名字
 //通過props來接收父組件傳過來的數(shù)據(jù)
 props:{
  selectData: {
  type: Object //規(guī)定傳過來的數(shù)據(jù)為對象，否則就會報錯（其實這樣寫就是規(guī)避錯誤和良好的習(xí)慣）
  }
 },
 methods:{
  EmitchangeOption(index){
  this.$emit('changeOption',index);
   // 通過點擊事件觸發(fā)EmitchangeOption函數(shù)，傳入當(dāng)前點擊下拉列表中的索引值index
   // 下拉框通過emit方法觸發(fā)父組件中changeOption函數(shù)，動態(tài)傳給父組件需要的數(shù)據(jù)，這里為索引值
  },
  changeStatus(){
   // 通過changeStatus事件動態(tài)改變selectStatus的值，從而控制下拉框的顯示隱藏
  this.selectData.selectStatus = !this.selectData.selectStatus
  }
 }
}
</script>

總結(jié)

• 從以上的示例可以看出來，父組件傳入數(shù)據(jù)，需要在父組件中線綁定一個屬性，掛載需要傳入的數(shù)據(jù)；

• 子組件接收父組件的數(shù)據(jù)通過 props 方法來接收；

• 子組件傳遞數(shù)據(jù)需要使用 emit 方法來綁定父組件中事先設(shè)定好的方法，從而動態(tài)傳遞操作后需要的數(shù)據(jù)

最終效果如下：

 

附上組件中的css，僅供參考：

.select-box{
 position: relative;
 max-width: 250px;
 line-height: 35px;
 margin: 50px auto;
}
.select-title{
 position: relative;
 padding: 0 30px 0 10px;
 border: 1px solid #d8dce5;
 border-radius: 5px;
 transition-duration: 300ms;
 cursor: pointer;
}
.select-title:after{
 content: '';
 position: absolute;
 height: 0;
 width: 0;
 border-top: 6px solid #d8dce5;
 border-left: 6px solid transparent;
 border-right: 6px solid transparent;
 right: 9px;
 top: 0;
 bottom: 0;
 margin: auto;
 transition-duration: 300ms;
 transition-timing-function: ease-in-out;
}
.select-title-active{
 border-color: #409eff;
}
.select-title-active:after{
 transform: rotate(-180deg);
 border-top-color: #409eff;
}
.select-options{
 position: absolute;
 padding:10px 0;
 top: 45px;
 border:1px solid #d8dce5;
 width: 100%;
 border-radius: 5px;
}
.select-option-item{
 padding:0 10px;
 cursor: pointer;
 transition-duration: 300ms;
}
.select-option-item:hover,.select-option-active{
 background: #f1f1f1;
 color: #409eff;
}
<!--箭頭css-->
.arrow-top{
 position: absolute;
 height: 0;
 width: 0;
 top: -7px;
 border-bottom: 7px solid #d8dce5;
 border-left: 7px solid transparent;
 border-right: 7px solid transparent;
 left: 0;
 right: 0;
 margin: auto;
 z-index: 99;
}
.arrow-top:after{
 content: '';
 position: absolute;
 display: block;
 height: 0;
 width: 0;
 border-bottom: 6px solid #fff;
 border-left: 6px solid transparent;
 border-right: 6px solid transparent;
 left: -6px;
 top: 1px;
 z-index: 99;
}
<!--下拉框顯示隱藏動畫-->
.slide-down-enter-active,.slide-down-leave{
 transition: all .3s ease-in-out;
 transform-origin:0 top;
 transform: scaleY(1);
}
.slide-down-enter{
 transform: scaleY(0);
}
.slide-down-leave-active{
 transition: all .3s ease-in-out;
 transform-origin:0 top;
 transform: scaleY(0);
}

以上就是小編為大家?guī)淼脑趺丛趘ue中實現(xiàn)一個父子通訊功能的全部內(nèi)容了，希望大家多多支持創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司！

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

網(wǎng)站欄目：怎么在vue中實現(xiàn)一個父子通訊功能-創(chuàng)新互聯(lián)
文章起源：http://jinyejixie.com/article32/ddecpc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、網(wǎng)站設(shè)計公司、標(biāo)簽優(yōu)化、用戶體驗、外貿(mào)網(wǎng)站建設(shè)、移動網(wǎng)站建設(shè)

廣告

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