How does Vue dynamically modify data in child components

1. Use ref in the parent component to mark the child component
2. Access subcomponents through this.$refs
3. You can modify subcomponent data and call subcomponent methods

<template>
<!-- 父组件 -->
    <div class="Father">
        <!-- 通过ref给子组件打上标识 -->
        <Son ref="son"></Son>
    </div>
</template>

<script>
    export default {
        mounted(){
            // 通过this.$refs获取到子组件,从而修改子组件中的值
            this.$refs.son.name = "test2"
        }
    }
    
</script>

<template>
<!-- 子组件 -->
    <div class="Son">
        {
   
   {}}
    </div>
</template>

<script>
    export default {
        data() {
            return {
                name: "test1"
            }
        }
    }
    
</script>