经过长时间的实验,我找到了一个切实可行的解决方案:
The project file structure:
src/
assets/
components/
Home.vue
App.vue
main.js
package.json
config.js
index.html
现在,我们想访问根组件——子组件Home.vue
中App
的vm字段,打开vue-route
.
main.js:
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App'
Vue.use(VueRouter);
let router = new VueRouter();
router.map({
'/': {
name: 'home',
component: require('./components/Home')
}
});
router.start(App, 'body');
App.vue:
<template>
<p>The current path: {{ $route.path }}.</p>
<p>Outer-Value: {{ outer_var }}</p>
<hr/>
<!-- The below line is very very important -->
<router-view :outer_var.sync="outer_var"></router-view>
</template>
<script>
import Home from './compnents/Home.vue'
export default {
replace: false,
components: { Home },
data: function() {
return {
outer_var: 'Outer Var Init Value.'
}
}
}
</script>
Home.vue
<template>
<div>
<p><input v-model="outer_var" /></p>
<p>Inner-Value: {{ outer_var }}</p>
</div>
</template>
<script>
export default {
// relating to the attribute define in outer <router-view> tag.
props: ['outer_var'],
data: function () {
return {
};
}
}
</script>
Conclusion
请注意,内部属性将属性绑定到组件标记的属性上(本例中为<router-view>
标记),NOT直接在父组件上.
因此,我们手动将passing props字段绑定为组件标记上的一个属性.见:http://vuejs.org/guide/components.html#Passing-Data-with-Props
另外,请注意,我在该属性上使用了.sync
,因为绑定默认为one-way-down:http://vuejs.org/guide/components.html#Prop-Binding-Types
您可以看到,通过嵌套组件共享状态有点混乱.为了更好地练习,我们可以使用Vuex.