vue3父子组件props传值，defineprops怎么用？(组合式)

目次
1.基础用法
2.使用解构赋值的方式界说props
3.使用toRefs的方式解构props
(1).通过ref相应式变量，修改对象本身不会触发相应式

---

1.基础用法

   父组件通过在子组件上绑定子组件中界说的props（:props=“”）通报数据给子组件

1. <!-- 父组件 -->
2. <template>
3.   <div>
4.     <ChildComponent :message="parentMessage" />
5.   </div>
6. </template>
8. <script setup>
9. import { ref } from 'vue';
11. //导入子组件
12. import ChildComponent from './ChildComponent.vue';
14. const parentMessage = ref('Hello from Parent');
15. </script>

复制代码

  在子组件中通过 defineprops 函数在子组件中界说props，在父组件上导入的子组件上绑定子组件界说的 props 就可以接收这些数据，然后可在 template (模板)中直接使用

1. <!-- 子组件 -->
2. <template>
3.   <div>
4.     <p>{{ message }}</p>
5.   </div>
6. </template>
8. <script setup>
10. //直接定义一个props(即message)
11. defineProps({
12.   message: {
13.     type: String,
14.     required: true
15.   }
16. });
18. </script>

复制代码

  
  但是，如果想要在JS代码中使用父组件通报的props数据时，必须要界说一个变量(一般我们使用props作为变量名)来接收defineprops函数的返回值才能使用

1. <!-- 子组件 -->
2. <template>
3.   <div>
4.     <p>{{ message }}</p>
5.   </div>
6. </template>
8. <script setup>
10. //定义props变量接收defineProps返回值
11. const props = defineProps({
12.   message: {
13.     type: String,
14.     required: true
15.   }
16. });
18. //在JS中使用message的值
19. console.log(props.message)
21. </script>

复制代码

  如果不界说一个变量担当，直接获取父组件传过来的数据message是undefinded
  2.使用解构赋值的方式界说props

   有时候为了方便使用父组件通过props通报过来的值，子组件一般会直接解构拿到父组件传来的值（这里使用message1和message2进行展示）

1. <!-- 子组件 -->
2. <template>
3.   <div>
4.     <p>{{ message1 }}</p>
5.   </div>
6. </template>
8. <script setup>
10. //解构赋值props
11. const {message1,message2} = defineProps({
12.   message1: {
13.     type: String,
14.     required: true
15.   },
16.   message2: {
17.     type: String,
18.     required: true
19.   }
20. });
22. //在JS中直接使用message1,message2的值
23. console.log(props.message1,props.message2)
25. </script>

复制代码

   这样做可以直接使用message1和message2，无需props.message1和props.message2
  3.使用toRefs的方式解构props

   toRefs可以让一个reactive对象的属性都变为ref对象。
在vue3早期版本时，解构props会造成数据会失去相应式，所以解构时，需要用torefs包裹，因为props本质上时reactive对象，torefs可以把reactive的每个属性变成ref对象，这样解构出来依旧是相应式。
留意：在Vue3的组合式API中， defineProps是一个内置的全局函数，不需要显式引入，而toRefs的使用需要引入。

1. <!-- 子组件 -->
2. <template>
3.   <div>
4.     <p>{{ message1 }}</p>
5.   </div>
6. </template>
8. <script setup>
9. import {toRefs } from 'vue';
11. const props = defineProps({
12.   message1: {
13.     type: String,
14.     required: true
15.   },
16.   message2: {
17.     type: String,
18.     required: true
19.   }
20. })；
22. //使用toRefs解构props
23. const {message1,message2} = toRefs(props);
25. console.log(message1,message2);
26. </script>

复制代码

   留意：torefs不能直接包裹 defineprops函数 ，会报错defineprops未界说
  (1).通过ref相应式变量，修改对象本身不会触发相应式

   还有一个因为相应式原理引发的有趣现象，首先我们界说一个obj对象，然后界说另一个obj1 ref对象包裹obj，例如：

1. <template>
2.   {{ obj1 }}
3.   <button
4.     @click="
5.       () => {
6.         obj.a = 3;
7.         console.log(obj, obj1);
8.       }
9.     "
10.   >
11.     点击按钮
12.   </button>
13. </template>
14. <script setup>
15. import { ref } from "vue";
16. const obj = { a: 1, b: 2 };
17. const obj1 = ref(obj);
18. </script>
19. <style></style>

复制代码

此时通过obj更改对象内属性a ，可以看到无论是obj还是obj1都被乐成更改，但dom并没有相应式更新。
缘故起因就是通过obj更改，并没有调用obj1的set方法，所以没有触发该实例的渲染函数，平凡范例的数据也是一样，只要不是通过ref对象本身更改，都不会调用set方法，就不会调用组件实例渲染函数，也就不会相应式(可以去检察相应式的原理)。
所以一般这种环境，需要其他变量界说相应式变量时，可以通过computed函数，即可相应式（ref包裹对象时，本质还是通过reactive包裹，所以一样会深度监听，所以没有相应式的缘故起因就是没有调用set方法，跟ref能否深度监听无关）
   用torefs包裹reactive对象会使其每个属性值都变成ref对象，单独具有相应式，所以结构出来不会失去相应式，但此ref对象和平凡的ref对象差别，有两个平凡ref对象没有的key属性和object属性，其中key属性是解构出来的属性的属性名，object是原reactive对象，当我们获取value值时，ref的get属性并不会直接返回value，而是通过key值向object属性值，也就是原reactive对象上获取，同样的，set方法也是更改原reactive对象，所以即使解构出来，单独使用，也会和原对象的值保持一致

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。