我浏览了这个vue-router@4.05 对象参数，它有些相关。该线程中提到了这个https://github.com/vuejs/vue-router-next/issues/494，但我仍然很困惑。
我还尝试使用路由器链接组件的:to属性传递一些数据。我做了两支笔来展示这个问题：
Pen 1成功传递了在路由定义中定义的对象。
Pen 2尝试传递一个动态对象，但它获取的是一个带有 [Object object] 的字符串，而不是实际对象，如 github 问题中所述。
控制台输出：
[Vue warn]：无效的道具：道具“存储库”的类型检查失败。预期对象，得到具有 > 值“[object Object]”的字符串。at <Repository repository="[object Object]" onVnodeUnmounted=fn ref=Ref > at at at
所以，如果我明白这一点，最终你不能传递一个动态对象，因为它被解析了，但你可以传递一个静态对象？
我尝试过使用 props: true 和一切，我正在尝试将功能模式解决方案作为更复杂的示例
片段：
<router-link :to="{ name: 'Home' }">Home</router-link>
<router-view />
<router-link
:to="{
name: 'Repository',
params: { repository: { one: '1', two: '2' } },
}">click me</router-link>
v1
const routes: Array<RouteRecordRaw> = [
{
path: "/",
name: "Home",
component: Home …我有一个正在使用的基本输入组件，它作为type一个属性，到目前为止一直工作得很好。然而，尝试使用它作为密码并实施混淆有点棘手。
如何在不改变 prop 的情况下切换密码的隐藏/显示？我认为做到这一点type = 'password'是type = 'text最好的方法，但显然不是。
我已经制作了一个Codesandbox来复制组件的该部分，但是任何建议或方向将不胜感激！
密码输入.vue：
<template>
<div>
<input :type="type" />
<button @click="obfuscateToggle" class="ml-auto pl-sm _eye">
<div>
<img :src="`/${eyeSvg}.svg`" alt="" />
</div>
</button>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
passwordVisible: false,
eyeSvg: "eye-closed",
};
},
props: {
type: { type: String, default: "text" },
},
methods: {
obfuscateToggle() {
if (this.eyeSvg === "eye-closed") {
this.eyeSvg = "eye";
} else this.eyeSvg = "eye-closed"; …谁能告诉我如何将组件的 prop 绑定到它自己的数据属性？例如，假设我有一个名为ModalComponent
<template> // ModalComponent.vue
<div v-if="showModal">
...
<button @click="showModal = !showModal">close the modal internally</button>
</div>
</template>
<script>
export default {
props: {
show: {
type: Boolean,
default: false
},
},
data() {
return {
showModal: false,
}
}
}
</script>
<style>
</style>
现在考虑我使用此模式作为父组件内部的可重用组件，使用外部按钮打开模式的弹出窗口。
<template>
<button @click="showChild = !showChild">click to open modal</button>
<ModalComponent :show="showChild" />
</template>
<script>
export default {
components: {ModalComponent},
data() {
return {
showChild: false,
}
}
}
</script>
<style>
</style>
如何使每次父母单击按钮时，通过将本地绑定showModal到 prop …
vue-props ×4
vue.js ×4
javascript ×2
obfuscation ×1
passwords ×1
state ×1
vue-router4 ×1
vuejs3 ×1