解决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监听

到此这篇关于解决vue父组件调用子组件只执行一次问题的文章就介绍到这了,更多相关vue父组件调用子组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！