快捷導(dǎo)航

vue打開(kāi)子組件彈窗都刷新功能的實(shí)現(xiàn)

更新時(shí)間：2020年09月21日 09:32:47 作者：梔妹兒

這篇文章主要介紹了vue打開(kāi)子組件彈窗都刷新功能的實(shí)現(xiàn),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

vue如何一打開(kāi)子組件彈窗都刷新？

在父頁(yè)面中給子組件同時(shí)綁定:visible.sync和v-if

:visible.sync="paramAddDialog" v-if="paramAddDialog"

整體代碼：

<el-dialog title="綁定其他更多的賬戶" width="1200px" align="center" :visible.sync="paramAddDialog" v-if="paramAddDialog">
  <addParamForm ref="addParam" @boundSuccess="boundSuccess" @cancelBound="paramAddDialog=false"/>
</el-dialog>

OK：

PS：下面看下VUE 父組件調(diào)用子組件彈窗

想搞一個(gè)新增編輯彈窗，和列表頁(yè)面分開(kāi)

先來(lái)一個(gè)父組件調(diào)用子組件彈窗的demo

父組件

<template>
  <div>
    <el-button @click="show">按鈕</el-button>
    
    <!-- 新增編輯彈框子組件 -->
    <add-or-update :addOrUpdateVisible="addOrUpdateVisible" @changeShow="showAddOrUpdate" ref="addOrUpdateRef"></add-or-update>
  </div>
</template>

<script>
// 引入子組件
import AddOrUpdate from './Edit'
export default {
  data(){
    return{
      // 控制新增編輯彈窗的顯示與隱藏
      addOrUpdateVisible: false
    }
  },
  // 使用子組件
  components:{
    AddOrUpdate
  },
  methods:{
    // 按鈕點(diǎn)擊事件 顯示新增編輯彈窗組件
    show(){
      this.addOrUpdateVisible = true
    },
    // 監(jiān)聽(tīng) 子組件彈窗關(guān)閉后觸發(fā)，有子組件調(diào)用
    showAddOrUpdate(data){
      if(data === 'false'){
        this.addOrUpdateVisible = false
      }else{
        this.addOrUpdateVisible = true
      }
    }
  }
}
</script>

子組件：

<template>
  <el-dialog
    title="提示"
    :visible.sync="showDialog"
    width="50%"
    @close="handleClose">

    <span>這是一段信息</span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="showDialog = false">取 消</el-button>
      <el-button type="primary" @click="showDialog = false">確 定</el-button>
    </span>

  </el-dialog>
</template>

<script>
export default {  
  // 接受父組件傳遞的值
  props:{
    addOrUpdateVisible:{
      type: Boolean,     
      default: false
    }
  },
  data(){
    return{
      // 控制彈出框顯示隱藏
      showDialog:false
    }
  },
  methods:{
    // 彈出框關(guān)閉后觸發(fā)
    handleClose(){
      // 子組件調(diào)用父組件方法，并傳遞參數(shù)
      this.$emit('changeShow','false')
    }
  },
  watch:{
    // 監(jiān)聽(tīng) addOrUpdateVisible 改變
    addOrUpdateVisible(oldVal,newVal){
      this.showDialog = this.addOrUpdateVisible
    },
  }
}
</script>

<style lang="less" scoped>

</style>

總結(jié)

到此這篇關(guān)于vue打開(kāi)子組件彈窗都刷新功能的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)vue打開(kāi)子組件彈窗都刷新內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: