【Vue3】setup通过defineProps获取props为null

我做的功能是父组件往子组件传值

父组件:

<MapComponent :zbx="zbx" :zby="zby" />

子组件:

setup(props) {
    // 定义接收到的 props
    const propsObj = defineProps({
      zbx: Number,
      zby: Number
    });

    console.log(propsObj) // null

按理来说,这么接收没问题啊,怎么打印结果是null呢?

其实原因很简单,defineProps只在setup语法糖中好使,也就是<script setup>的方式。

那么如果我就不想用语法糖形式来写怎么办呢?

写成如下代码就可以取到值了:

export default {
    name: 'MapComponent',
    props: {
      zbx: {
        type: Number,
        default: null
      },
      zby: {
        type: Number,
        default: null
      }
    },
    setup(props) {
        console.log(props.zbx)

相关推荐

  1. Vue3setup通过defineProps获取propsnull

    2024-05-09 07:56:04       32 阅读
  2. (自用笔记)每天一点vue3——第一天setup/defineProps

    2024-05-09 07:56:04       47 阅读
  3. vue3defineProps详解

    2024-05-09 07:56:04       42 阅读
  4. Vue3 defineProps的使用

    2024-05-09 07:56:04       24 阅读
  5. VUE3——setup介绍

    2024-05-09 07:56:04       38 阅读
  6. 学习Vue3defineProps方法

    2024-05-09 07:56:04       55 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-05-09 07:56:04       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-05-09 07:56:04       106 阅读
  3. 在Django里面运行非项目文件

    2024-05-09 07:56:04       87 阅读
  4. Python语言-面向对象

    2024-05-09 07:56:04       96 阅读

热门阅读

  1. AirSim 如何获取 settings 里面的传感器的数据

    2024-05-09 07:56:04       29 阅读
  2. 使用自关联方法处理多表关系

    2024-05-09 07:56:04       34 阅读
  3. 【CV】视频图像滤波技术

    2024-05-09 07:56:04       32 阅读
  4. 静态NAT

    静态NAT

    2024-05-09 07:56:04      35 阅读
  5. 教学目标的四个维度

    2024-05-09 07:56:04       33 阅读
  6. 传参右值应用的好处

    2024-05-09 07:56:04       34 阅读
  7. 用最简单的示例去理解:Dijkstra最短路径算法

    2024-05-09 07:56:04       29 阅读
  8. Spring Boot应用部署 - Tomcat容器替换为Undertow容器

    2024-05-09 07:56:04       31 阅读
  9. spring boot 核心配置文件是什么?

    2024-05-09 07:56:04       36 阅读