vue+elementUI中Dialog實現組件彈框以及子父組件頁面傳值

彈框

使用element-UI中的Dialog 對話框 + vue組件結合實現~~~·~

定義html

<div @click="MyAnalyze()">我的區划</div>

 <el-dialog title="" :visible.sync="dialogBiomeVisible">
      <NationalBiome :closeValue="'TypeBiome'" @closeMoule="closeMoule"></NationalBiome>
 </el-dialog>

 

<el-dialog> </el-dialog> 這是element-UI自帶的標簽，

:visible.sync="" 是用來控制顯示或者隱藏狀態，當dialogBiomeVisible的值為true的時候為顯示，false的時候就是隱藏，

<NationalBiome></NationalBiome> 這個就是自己定義的組件名；

引入組件

<script>
import NationalBiome from './National_Biome';  //組件內部引入 ---編輯生態區
export default {
  name: 'App',
  components:{  //定義組件
    NationalBiome, //編輯生態區
  },
}

components中用來定義組件名稱，名稱要和important的時候保持一致

 

傳值--父組件傳子組件

父組件中的定義

父組件向之組件傳值的時候，需要在組件標簽中定義一個自定義屬性進行傳值，可以傳一個字符串，也可以傳一個變量

子組件中的定義（取值）

子組件在export default{}中通過props來進行接收，使用的時候可以直接當變量使用，js中通過this.closeValue取值，html中{{closeValue}}

傳值--子組件傳父組件

子組件中的定義

子組件中通過觸發某個事件，然后通過this.$emit()來進行傳值，第一個值是事件名，第二個是傳遞的值

<!--關閉按鈕-->
<div class="fr right_icon" @click="closeBtn()">
     <s></s>
</div>

 methods:{
     //點擊關閉的時候--給調用的父組件傳值
     closeBtn(){
          if(this.closeValue == "TypeBiome"){
              this.$emit('closeMoule','closeMoule1')
           }
      }
}

父組件定義（取值）

定義一個事件監聽子組件的數據變化 closeMoule方法的參數就是子組件中closeMoule1的值

<SpeciesAnalyzed :closeValue="'TypeBiome'" @closeMoule="closeMoule"></SpeciesAnalyzed>

methods:{
//獲取自組建傳過來的值--關閉編輯生態區的彈框
    closeMoule(e){
        alert(e)
    }
}