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