vue3.2 setup标签语法糖 父子组件传参顺序问题

vue3.2 setup标签语法糖 父子组件传参顺序问题

父组件

<!-- 父组件 -->
<div class="left">
//如果不加这个v-if 会导致子组件的defineProps没有数据;
//因为接口是异步的
//拿到数据前子组件已经created了,所以是null给子组件加v-if等有数据了再显示子组件
//或者不使用v-if在子组件中使用 watch也可以监听到data的值;
//根据自身需求
  <topcharts v-if="data.info" :data="data" />
</div>
<script setup lang="ts">
	//引入组件
	import topcharts from "./common/topcharts.vue";
	//模拟接口请求调用
	getData();
	function getData() {
	  dataListApi({}).then(res => {
	    data.info = res.data; //响应式赋值
	  });
	}
	const data = reactive({
	  info: null,
	});
</script>

子组件

  <!-- 子组件 -->
  <div id="top_charts"></div>
  <script setup lang="ts">
  		// 引入echarts
		import * as echarts from "echarts";
		//规定接受类型
		type Props = {
		  data: any;
		};
		// *** 如果直接在模版上使用 可以直接
		// defineProps<Props>()
		//需要在js中处理数据 defineProps<Props>() 会返回一个proxy对象需要一个值接收一下
		const data = defineProps<Props>();
		
		//dom渲染完成调用echarts绘制
		nextTick(() => {
		  //initcharts();
		});
		
		//第二种办法		
		//watch
		watch(data,(newVal,oldVal)=>{
		   console.log(newVal,oldVal);
		   initcharts();
		})
</script>