一、思路
当自定义组件需要接收路由页面传值时,使用prop进行传值。
二、代码分析
(1)在路由页面通过prop属性对组件进行传值
<template>
<nav>
<RouterLink to="/">Home</RouterLink>
<RouterLink to="/about">About</RouterLink>
</nav>
<RouterView />
<!-- 通过prop属性给组件传递数据 -->
<tit-one title="我是title" age="18"></tit-one>
</template>
(2)在组件页面对 通过props配置,接收外部传递的prop数据
export default {
// 通过props配置接收外部传递的值,然后就可以使用了
props: ["title", "age"],
setup() {
return {};
},
};
(3)在组件模板里就可以使用这两个接收的数据了
<template>
<p>我是自定义组件</p>
<!-- 可以在模板里使用外部接收的属性 -->
<p>{{ title + age }}</p>
</template>