Vue3：父组件向子组件传值（Props）

背景

• 在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(); //数据1
    const selected = ref("0"); //数据2
    
    return {
      data,
      selected    
    };
    
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

• 解析：
  （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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

• 解析：

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

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