gpt4 book ai didi

javascript - 如何将属性传递给 Vue Js 中由路由器调用的组件

转载 作者:行者123 更新时间:2023-12-03 03:29:26 25 4
gpt4 key购买 nike

我是 VueJs 新手,我对两个组件有疑问。我正在尝试使用 vuejs 路由器显示一个组件,并且我必须将属性传递给该组件,并且由于它不是该组件的子组件(位于不同的目录中),我如何将数据传递给该组件?例如:

这是一个父组件:

 <template>
<div class="container">
<router-link to="/Form"></router-link>
</div>
</template>
<script>
export default{
data(){
return{
values: {val1: 123, val2: 321}
}
}
}
</script>

这是一个需要属性的组件,Form组件:

 <template>
<div class="container">
<form>
<input type="text" v-model="values.val1"/>
<input type="number" v-model="values.val2"/>
</form>
</div>
</template>
<script>
export default{
props: {
values: {
type: Object
}
}
}
</script>

最佳答案

您可以将值作为查询对象传递:

<router-link :to="{ path: '/Form', query: values }"></router-link>

并让 Form 组件检查 $route.query 值,而不是使用 props:

<template>
<div class="container">
<form>
<input type="text" v-model="values.val1"/>
<input type="number" v-model="values.val2"/>
</form>
</div>
</template>
<script>
export default {
data() {
return {
values: this.$route.query
}
}
}
</script>

请注意,这些值将作为查询字符串添加到 URL。

<小时/>

否则,我会看看 this post 。或者也许看看 Vuex .

关于javascript - 如何将属性传递给 Vue Js 中由路由器调用的组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46163494/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com