[JavaScript知识库] Vue 父组件动态传值给子组件通过key实现

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> Vue 父组件动态传值给子组件通过key实现 -> 正文阅读

[JavaScript知识库]Vue 父组件动态传值给子组件通过key实现

由于组件key作为组件的唯一标识，key值改变则子组件也会被重新加载。

我们只需要在父组件触发事件的时候改变key的值就可以了，一般用时间戳就可以实现

父组件：

<template>
  <div class="content" @click="thisClick">
    <ChildClass :key="timer" :child-name="childName"></ChildClass>
  </div>
</template>

<script>
import ChildClass from './ChildClass.vue'
export default {
  components: { ChildClass },
  prop: {},
  name: 'ParentClass',
  data () {
    return {
      timer: '',
      childName: '张三'
    }
  },
  methods: {
    thisClick () {
      this.timer = new Date().getTime()
      this.childName = '张三_' + this.timer
    }
  }
}
</script>

子组件：

<template>
  <div>
    <h1>{{ childName }}</h1>
  </div>
</template>

<script>
export default {
  props: {
    childName: {
      type: String,
      default: null
    }
  },
  data () {
  }
}
</script>