看一遍你就能学会，解决vue父组件调用子组件只执行一次方法问题

父组件调用子组件方法，居然方法只执行一次，这是什么情况，其实解决方法很简单，不需要ref，不需要$emit，$on，只需要动动手绑定key值即可，就能成功再次执行子组件的created生命周期，相当简单有效，相信你看一遍就能学会。如果学会了，那就支持一下博主吧！

父组件：

<template>
    <div>
        <el-button type="primary" @click="handlejgFile">打开统计表</el-button>
    
        <el-dialog class="accept-dialog" title="统计表" :show-close="false"              
          :visible.sync="jgFileVisible" width="800px">
             <img src="../../assets/index12.png" class="accept-close-icon" @click="jgFileVisible = false"/>
             <jgFileList :key="jgFileTimer"/>
        </el-dialog>
    </div>
</template>
<script>
    import jgFileList from "./list";
    export default{
        data(){
            jgFileVisible:false,
            jgFileTimer:""
        },
        components:{
          jgFileList,
        },
        methods:{
            handlejgFile(){
                this.jgFileVisible = true;
                this.jgFileTimer = new Date().getTime();
            },

        }

    }
    
</script>

子组件 list.vue：

<template>
  <div>
    <el-table class="mt15 accept-table" border :data="jgFileData" highlight-current-row style="width: 100%;"
      :header-cell-style="{ textAlign: 'center', background: 'rgba(24,109,245,.65)', color: '#fff' }"
      :cell-style="{ textAlign: 'center'}">
      <el-table-column prop="name" label="项目名称">
        工程1
      </el-table-column>
      
    </el-table>
  </div>
</template>
<script>
import {jgFileReleasePageList } from "../../api/userMG"
export default {
  data(){
    return {
      jgFileData:[],

    }
  },
  methods:{
      jgFileReleasePageListFun() {
        let params = {
          pageNo: this.jgFilePagination.pageNo,
          pageSize: this.jgFilePagination.pageSize,
        }
        jgFileReleasePageList(params).then(res => {
          if (res.code == 200) {
            this.jgFileData = res.data.records;
            this.jgFilePagination.total = res.data.total;
            this.jgFileCurrent = res.data.current;
          }
        })
      }
  },
  created(){
    this.jgFileReleasePageListFun();
  }
}
</script>

问题原因： 

在父组件中引用的子组件标签上添加属性，来渲染拥有不同数据的子组件。注意这一次和上一次传过去的属性值一样的话，watch 监听的属性因为没有新的变化就会导致对应的数据也没有变化。created生命周期函数也就会只执行一次。

如果需要这个组件每次都重新渲染dom 元素，每次都执行created函数的话，这时就可以使用vue中的key 属性来解决。

⭐️⭐️⭐️  作者：船长在船上
🚩🚩🚩  主页：船长在船上的博客
🔨🔨🔨  简介：CSDN前端领域博客专家，CSDN前端领域优质创作者，资深前端开发工程师，专注web前端领域开发，在CSDN分享工作中遇到的问题以及问题解决方法和对项目开发的实际案例总结以及新技术的认识。