在项目中对父组件的值进行修改后希望子组件可以动态的刷新。

我们可以在子组件标签上传入一个动态的变量（布尔值、字符串、时间戳都可以），当我们对父组件进行数据操作时，把这个变量修改，子组件就会检测到数据的变化从而刷新页面。

这里以vue3作为示例，vue2使用时逻辑同理
父组件

template>
    <div class="home">
        <h3>父组件</h3>
        <div class="child-components">
            <div v-for="item in list" :key="item.name">
                <Child :item="item" :key="isUpdateChild" :str="str"/>
            </div>
        </div>
        <div>
            <el-button type="primary" @click="changeStr">修改str</el-button>
        </div>
    </div>
</template>

<script setup>
import {ref, reactive, toRef, toRefs} from 'vue'
import Child from "./child.vue";
const list = reactive(
    [
        {name: '张三1', age: 18},
        {name: '张三2', age: 19},
        {name: '张三3', age: 20},
    ]
)
const str = ref("ABCD");
// 定义变量来控制刷新子组件
let isUpdateChild=ref(true)
const changeStr = () => {
    str.value = 'EFGH'
    isUpdateChild.value=!isUpdateChild.value
    console.log('--->父组件str.value',str.value)
}
</script>

子组件

<template>
    <div class="child">
        <p>子组件：姓名：{{ item.name }}</p>
        <p>接收数据：{{ receiveStr }}</p>
    </div>
</template>
<script setup>
import {ref} from 'vue'
const props = defineProps({
    item: {
        type: Object,
        default: {
            name: '李四'
        }
    },
    str: {
        type: String
    }
})
// 将父组件的传过来的值用 receiveStr 接收，并转换为响应式。
const receiveStr=ref(props.str)
</script>