今天写代码，发现了在setup()生命周期函数中通过defineProps获取props的值是null

那么要怎么才能拿到参数呢。

我们先用父组件给子组件传参

Home.vue 

页面部分

 <div class="l_bottom">

         <LeftBottom :theme="theme"></LeftBottom>

 </div>

js部分

<script>

 data() {

    return {

      theme: "black"

    };

  },

</script>

LeftBottom.vue

 这个时候，运行结果是null，是取不到里面的参数的

 

但是呢，在setup语法糖里面是可以取到的。

如下：

这个时候已经可以取到props的参数了

如果习惯使用setup生命周期的大佬们遇见这个问题可以使用传参解决这个问题。

setup 参数
使用setup 时，它将接收两个参数：**props 和 context 。**

props

第一个参数是 props ，表示父组件给子组件传值，且组件内部声明接收了的属性，在子组件中接收时，接收到的数据被包装成一个代理对象，能够实现响应式，当传入新的 props 时，自动更新。
原文链接：https://blog.csdn.net/qq_43641110/article/details/129981821

附一下我的源码：

这里也是可以取到props的参数

 需要将接收的props作用在setup的顶层，千万不要放到setup生命周期里面（defineProps只能在setup中使用，且只能在setup的顶层使用，不能再局部作用域使用）。

所以还是推荐使用setup的语法糖，毕竟在 script setup语法糖中，
定义的属性和方法无需返回，可以直接使用，而且defineProps也不会出现这个props获取结果为null的问题。

大家写代码的时候尽量不要用vue2和vue3混合写哦。