（二十二）给组件传值 Props

老怪兽

发布于 2023-02-22 18:44:33

1.4K00

代码可运行

文章被收录于专栏：老怪兽的前端之旅老怪兽的前端之旅

运行总次数：0

代码可运行

给组件传值 Props

说明

目前我们给组件传递参数，主要是使用动态路由来传递的参数，vue-router 也支持通过组件属性的方式来传递数据 props

使用 pros 传递数据的语法

// 1. 先在展示详情的组件接收  props 
props: ['postId']

created() {
  console.log(postsId)
}

如果需要使用 props 来传递数据，就需要在 router.js 当中设置 props 的属性未 true

import { createRouter, createWebHistory } from "vue-router";

const routes = [
  {
    path: "/:postId",
    component: BlogPostPage,
    // 设置 props 为true 就可以开始使用prop是传递数据了
    props: true,
    // 可以固定传递 props
    props: { postId: 5 },
    // props 可以是一个函数他返回一个键值对，可以在里面做一些业务逻辑操作
    props: (route) => {
      console.log(route);
      // 实例 对数据进行 类型转化
      return { postId: Number(route.params.postId) };
    },
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022年11月14日，如有侵权请联系 cloudcommunity@tencent.com 删除

router