Javascript vue路由器访问组件数据

我正在使用vue路由器文档中给出的示例

HTML:

{{title}}
/家
/福

JavaScript:

const Foo = { template: '<div>foo</div>', data: {title: "Foo" }
const Bar = { template: '<div>bar</div>', data: {title: "Bar" }

constfoo={template:'Foo'，data:{title:'Foo}
常量栏={模板：'Bar'，数据：{标题：'Bar}

是否可以访问锚点之外的选定组件数据并更新{{title}}头

---

完整的示例是

我有两种可能性。第一种是使用

this.$parent.title

直接编辑父数据。 第二种方法是触发一个事件

this.$parent.$emit（'changeTitle'，'foo'）；

我认为最后一个更好，因为对状态的控制总是在父组件中

const Home={
模板：“主页”，
数据：{
标题：“家”
},
安装的（）{
这个。$parent.title='home'；//直接
}
}
常量Foo={
模板：“Foo”，
数据：{
标题：“富”
},
安装的（）{
此.$parent.$emit（'changeTitle'，'foo'）；//发出事件
}
}
常量路由器=新的VueRouter({
模式：“历史”，
路线：[
{ 
路径：“/”，
组成部分：家庭
},
{ 
路径：'/foo'，
组成部分：富
}
]
})
新Vue({
路由器，
el:“#应用程序”，
数据：{
标题：“首字母”
},
销毁{
此项为.$off（'changeTitle'）；
},
创建（）{
const_self=这个；
此.$on（'changeTitle'，函数（newTitle）{
_self.title=newTitle；
});
}
})

{{title}}
/家
/福

您好，谢谢您的回答。同意，第二种解决方案更好。

const Foo = { template: '<div>foo</div>', data: {title: "Foo" }
const Bar = { template: '<div>bar</div>', data: {title: "Bar" }