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

千陽網站建設公司成都創新互聯,千陽網站設計制作，有大型網站制作公司豐富經驗。已為千陽上千家提供企業網站建設服務。企業網站搭建\成都外貿網站建設要多少錢，請找那個售后服務好的千陽做網站的公司定做！

為什么要使用Vue

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

父組件

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

子組件

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

總結

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

• 子組件接收父組件的數據通過 props 方法來接收；

• 子組件傳遞數據需要使用 emit 方法來綁定父組件中事先設定好的方法，從而動態傳遞操作后需要的數據

最終效果如下：

 

附上組件中的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);
}

以上就是小編為大家帶來的怎么在vue中實現一個父子通訊功能的全部內容了，希望大家多多支持創新互聯！

文章標題：怎么在vue中實現一個父子通訊功能
標題鏈接：http://www.yijiale78.com/article40/pcppho.html

成都網站建設公司_創新互聯，為您提供關鍵詞優化、全網營銷推廣、虛擬主機、小程序開發、App設計、用戶體驗

廣告

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