我正在使用 Vue-cli
安装了 vue-router,在我的内部 App.vue
我有 <router-link to="/about" >About</router-link>
它将在单击时显示 about 组件的内容。现在,我想将 Prop 数据传递给 About.vue
来自``App.vue 的组件。在 <router-link to="/about" :myprops="myprops">About</router-link>
中添加 :myprops="myprops"没有用,这就是为什么我将以下内容添加到 App.vue
:
<script>
import About from './components/About.vue';
export default {
name: 'App',
components:{'my-about':About}
data(){return {...}
},
props:{myprops:[{.....}]}
}
</script>
内
About.vue
我做的组件 props:['myprops']
获取 Prop 数据并使用 {{myprops}}
来显示它。现在,如果在
App.vue
里面, 我加<my-about :myprops="myprops"></my-about>
那么 Prop 数据就会交给About.vue
并且会显示About.vue
的内容也将显示在我的 App.vue
上页面,而且,它会在 About.vue
里面重复自己.我不想要那个。我只需要通过 myprops
数据到 About.vue
组件不显示 About.vue
里面的内容App.vue
.而且,这是我在
router/index.js
中的路径代码以供引用:{ path: '/about', component: About }
我怎么能做到这一点?
最佳答案
这假设您不是 Vue 的初学者。
1 - 在目标组件上定义一个 prop
export default {
name: "MyComponent",
props: {
exampleProp: Object
}
}
2 - 使用 定义路由 Prop :真实
...
routes: [
{
path: '/mycomponent',
name: 'MyComponent',
component: MyComponent,
props: true
},
...
3 - 使用路线姓名 在路由器链接而不是路径上,并将 Prop 作为参数传递。
<router-link
:to="{ name: 'MyComponent',
params: { exampleProp: examplePropValue }}">
Link to My Component
</router-link>
关于vue.js - Vue cli 通过路由器链接传递 Prop (数据),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51244708/