vue.js - VueJS:在没有集中存储(vuex 或 eventBus)的情况下直接访问子项(使用 vue-router)时访问子项中的父道具
问题描述
在这个代码框演示中,父home
组件有一个子addItem
组件。父母将数组(作为道具)传递给孩子,因此孩子能够将项目添加到父母的列表中,即从父母 -> 孩子传递数据的正常方式,即通过 props :fruitsArr="fruits"
。
主.js
import Vue from "vue";
import VueRouter from "vue-router";
import App from "./App.vue";
import Home from "./components/Home.vue";
import addItem from "./components/addItem.vue";
Vue.use(VueRouter);
var router = new VueRouter({
mode: "history",
routes: [
{ path: "", component: Home, name: "Home" },
{
path: "/addItem",
component: addItem,
name: "Add Item"
}
]
});
Vue.config.productionTip = false;
new Vue({
router,
render: h => h(App)
}).$mount("#app");
应用程序.vue
<template>
<div id="app">
<app-header></app-header>
<br>
<router-view></router-view>
</div>
</template>
<script>
import appHeader from "./components/common/appHeader";
export default {
name: "App",
components: {
appHeader
}
};
</script>
appHeader.vue
<template>
<ul class="nav nav-pills">
<router-link tag="li" to="/" active-class="active" exact>
<a>Home</a>
</router-link>
<router-link tag="li" to="/addItem" active-class="active">
<a>Add Item</a>
</router-link>
</ul>
</template>
主页.vue
<template>
<div>
<addItem :fruitsArr="fruits"/>
<h3>Fruits List</h3>
<ul>
<li v-for="(fruit, idx) in fruits" :key="idx">{{fruit}}</li>
</ul>
</div>
</template>
<script>
import addItem from "./addItem";
export default {
name: "App",
data() {
return {
fruits: ["Apple", "Mango", "Orange", "PineApple"]
};
},
components: {
addItem
}
};
</script>
addItem.vue
<template>
<div class="input-wrapper">
Enter Fruit Name:
<input type="text" v-model="fruitItem">
<button @click="addFruit">Add Fruit</button>
</div>
</template>
<script>
export default {
data() {
return {
fruitItem: ""
};
},
props: ["fruitsArr"],
methods: {
addFruit() {
this.fruitsArr.push(this.fruitItem);
}
},
};
</script>
问题是当直接使用router-link
(vue-router)访问孩子时,父母的道具:fruitsArr="fruits"
不可用。
任何伙伴可以告诉我,当当前路线是孩子时,如何或正确的方式将父母的道具传递给孩子,这样孩子就可以将项目添加到父母的列表中。我更喜欢不使用 VueX 或任何其他集中式存储(例如 eventBus)的解决方案。
谢谢
解决方案
有几个解决方案。
提供/注入
您可以使用提供/注入将数据向下发送到子层次结构。这是推荐的方式来共享数据parent to non-immediate child
时,只需要一个单一的通信parent-child branch
,而你不想去Vuex
。
https://vuejs.org/v2/api/#provide-inject
元字段
您可以将项目存储在路由的元字段中,并在导航守卫中对其进行初始化。然后它在所有组件中都可用。
https://router.vuejs.org/guide/advanced/navigation-guards.html
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
children: [
{
path: 'bar',
component: Bar,
// a meta field
meta: { requiresAuth: true }
}
]
}
]
})
话虽如此,Vue
方法是emit events up
and receive properties down
,因此如果您的用例允许,请尝试使用该架构。
推荐阅读
- android - 如何使用 android adb shell 连接到 ssh 服务器?
- c - 如何使数组从用户读取?
- promise - 是否可以取消取消承诺?
- linux - 如何仅使用默认工具监视 linux redhat 目录中的新文件(创建/移动)?
- python - 如何使用minidom从python中的xml文件中读取数据
- pandas - BeautifulSoup 表到数据框
- r - 如何根据 R 中的日期创建 2 列?
- java - java中泛型类的泛型容器
- java - 问:Android - (EditText) 提示与文本大小 + Alpha 仅在提示文本上?
- jquery - 在 jQuery 中,禁用 keyup 函数中的提交按钮