背景

• 在Vue3项目里，页面A（在views文件夹里）需要读取某个接口的数据，而页面A引入的组件a（在components文件夹里）也需要读取该接口的数据
• 为了避免重复读取数据从而造成资源浪费，可以利用传值来实现把页面A读取到的数据传递给组件a
• 即将父组件A的值传递给子组件a

实现

在Vue3中，可以使用props属性将值从父组件传递给子组件。

1、父组件

• 在父组件中引入子组件children，并把要传递的数据绑定到子组件上

<template><div class="wrap">  <children :selected="selected" :selectedValue="data"></children></div>
</template><script>
import children from "@/components/children.vue";
import axios from "axios";
import { onMounted, ref } from "vue";
export default {components: {children},setup() {const data = ref(); //数据1const selected = ref("0"); //数据2return {data,selected    };}
}
</script>

• 解析：
  （1）把要传递的数据绑定在子组件上
  
  （2）引入子组件，定义并返回父组件中的数据
  

2、子组件

• 在子组件中定义props属性，以对象的形式列出 props，键值对的名称和值分别是 prop 各自的名称和数据类型

<script>
import { ref, watch } from "vue";
export default {props: {selected: String,selectedValue: {type: Object,},},setup(props) {// 监听下拉框的内容并读取数据watch(() => [props.selected, props.selectedValue],([newSelect, newData], [oldSelect, oldData]) => {//利用父组件传过来的值可以执行相应的操作weekdata.value = newData.week; //以周为维度的数据monthdata.value = newData.month; //以月为维度的数据})              }
}
</script>

• 解析：

（1）定义props属性，最少包括：变量名和数据类型

（2）利用watch监听并处理变量
利用watch监听传递过来的值，就可以对传递过来的值去执行相关的操作