vue解决父组件调用子组件只执行一次问题

一、问题

开发中，需求是将内容展示作为一个组件，输入为contentId，请求在组件中，只需根据父组件传过来的contentId去请求内容的详情即可。但是过程中却发现一个问题，第一次打开弹框，展示内容没问题，但是接下来的多次点击发现一直是第一次请求的数据，也就是说，内容详情并未再次发生改变。

二、原因

在父组件中引用的子组件标签上添加属性，来渲染可以拥有不同数据的子组件。但是vue 的组件有个特点，如果我们这一次和上一次传过去的属性值一样的话，watch 监听的属性因为没有新的变化(这次的值和上一次的值一样watch 中调用的函数不执行)，导致对应的数据也没有变化。created() 生命周期函数也是只执行一次。但是有时候我们需要这个组件每次都重新生成dom 元素，每次都执行created() 函数。这时候就用到了vue中的key 属性。

三、解决方案

<template>
  <div>
    <div>
      <h1>父级</h1>
      <button @click="handleLoad">点击重新加载子级</button>
    </div>
    <children :key="timer"></children>
  </div>
</template>
 
<script>
  import children from '@/components/parent/children'
  export default {
    name: 'parent',
    components: { children },
    data () {
      return {
        timer: ''
      }
    },
    methods: {
      handleLoad () {
        this.timer = new Date().getTime()
      }
    }
  }
</script>

总结：

其实解决问题的本质只要可以让弹框这个dom元素每次打开重新加载一次，就会解决。

只要是一个变量即可促使dom刷新，例如：v-if、v-show、当前时间戳、或者在子组件使用watch监听