vueサブアセンブリのシャッターを開けても機能をリフレッシュすることができます。


どうやってサブアセンブリの弾戸を開けても更新できますか?

親ページでサブアセンブリを同時にバインドする: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の親コンポーネントを見て、サブアセンブリのポップアップを起動します。
新しい編集ウィンドウを作りたいです。リストページと別れています。
まず父の部品を一つください。子供の部品の弾戸を呼び出すデモです。
親コンポーネント

<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:{
    //                  
    show(){
      this.addOrUpdateVisible = true
    },
    //              ,      
    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:{
    //         
    handleClose(){
      //           ,     
      this.$emit('changeShow','false')
    }
  },
  watch:{
    //    addOrUpdateVisible   
    addOrUpdateVisible(oldVal,newVal){
      this.showDialog = this.addOrUpdateVisible
    },
  }
}
</script>

<style lang="less" scoped>

</style>
締め括りをつける
ここで、このvueについては、サブアセンブリのシャッターを開けても、機能を更新するという実現された文章を紹介します。これに関連して、より多くのvueがサブアセンブリのシャッターを開けても、内容を更新します。私たちの以前の文章を検索したり、下記の関連記事を引き続き閲覧したりしてください。これからもよろしくお願いします。