vue父组件控制子组件加载渲染

vue控制子组件加载渲染

1. vue父组件

<template>
  <div>
    <child  v-if="flag" />
    <button @click="test">添加车牌号</button>
  </div>
</template>
 
<script setup>
import { ref, onMounted } from 'vue';
import Child from './Child.vue'; // 确保路径正确
  const id = ref(0);
  const message = ref('');
  
  //默认不加载
  const flag = ref(false);
  const test = () => {
        id.value = 1;
		message.value  "皮卡";
		flag.value=true;
	};
</script>

2. vue子组件

<template>
 <div>{{ message }}</div>
</template>

<script>
export default {
 	data() {
   		return {
   			message: ''
   			}
   		},
            
   mounted() {
   			this.message = "皮卡";
   		
   	}
   	}
</script>