在这个codesandbox演示中,父主
组件有一个子addItem
组件。父级将数组(作为道具)传递给子级,因此子级可以将项添加到父级列表中,即从父级传递数据的正常方式-
Main.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");
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>
Home.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)直接访问子节点时,父节点的prop不可用。
任何好友都可以告诉我,当当前路径为子路径时,如何或以正确的方式将父路径的道具传递给子路径,以便子路径能够将道具添加到父路径的列表中。我更喜欢不使用VueX或任何其他集中式存储(如eventBus)的解决方案。
谢谢
史蒂文·斯彭金的回答很好。但您应考虑到提供/注入数据不是被动的。
也就是说,你需要做一些集中的“真相来源”。如果您不想使用Vuex,最简单的解决方案是声明一个以上的Vue实例并将全局数据存储在那里。这将是反应性的。
const myStore = new Vue({
data:{
fruits: ["Apple", "Mango", "Orange", "PineApple"]
}
})
export myStore;
在你的组件中
import {myStore} from 'somewhere';
//to use prop in your template - proxy it using computed prop
....
computed:{
fruits(){
return myStore.fruits;
}
}
....
有几个解决方案。
可以使用提供/注入向下子层次结构发送数据。当只需要在单个父-子分支
上进行通信,并且您不想使用Vuex
时,推荐使用这种方式将数据从父级共享到非直接子级
。
https://vuejs.org/v2/api/#provide-注入
您可以将项目存储在路由的元字段中,并在导航保护中初始化它。然后它在所有组件中都可用。
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
的方法是向上发出事件,向下接收属性,因此,如果您的用例允许,请尝试使用该体系结构。
在应用程序中使用JavaFX,我有一个main.fxml文件,其中包含一些fxml子文件。 我想从子控制器访问Main.fxml的MainController类。 我试着用一个例子来解释得更好: MainFXML: 主控制器: ChildFXML:
问题内容: 如何从儿童的基类访问装饰器? 我以为(错误地)认为ffg。会工作: 该类工作正常,但随后我创建了一个继承自此的子类: 这甚至无法正确导入,更不用说运行了。@_deco未定义。尝试baseclass._deco会引发未绑定的方法_deco()错误,这并不奇怪。 任何想法如何做到这一点,我真的很想将装饰器封装在该类中,但是我对此想法并不满意,需要在基类和子类中对其进行调用。 问题答案:
我试图从父域()访问子域()上的cookie集,我想从页面中的一点Javascript来实现这一点。 首先,我要为域 当我加载<代码>小。实例org我可以成功地看到我刚刚设置的cookie。加载我看不到任何来自small的cookies。实例org。也许并不奇怪。 所以我想我需要向子域发出请求,以便在主域中包含一些东西,一个脚本标签。 现在当我加载通过对脚本标签的请求,并在浏览器中查看,我可以从。
问题内容: 假设我们有一个包含私有实例变量的类。 现在,让我们有另一个类,其中。如果在中没有定义访问器方法,可以在访问变量中使用非静态方法吗? 顺便说一下,我在用Java工作。 问题答案: 不,不符合Java语言规范,第3版: 6.6.8示例:私有字段,方法和构造函数 私有类成员或构造函数只能在包含该成员或构造函数声明的顶级类(第7.6节)的主体内访问。它不是子类继承的。 但是不管这种语言限制如何
问题内容: 我可以在没有jQuery的情况下访问数据属性吗? 使用jQuery很容易,但是如果没有jQuery,我在任何地方都看不到该怎么做。 如果我在Google上搜索“没有jQuery”,那么我得到的只是jQuery示例。 可能吗 问题答案: 在这里,我找到了这个例子: 因此,它看起来非常可行。
我有以下Vuex商店(main.js): 我还为Vue路由器(routes.js)定义了以下路由: 我试图这样做,如果Vuex存储了对象,并且将属性设置为,则路由器会将用户重定向到登录页面。 我有这个: 问题是,我不知道如何从函数内部访问Vuex商店的对象。 我知道我可以在组件中使用来设置路由器保护逻辑,但这会使每个组件变得杂乱无章。我想在路由器级别集中定义它。