在项目当中，遇到一个问题。当父页面的某个属性变化时，需要router-view中的页面根据不同的值进行不同的操作。
仔细想一下，其实类似父子组件之间的传值。
实现过程如下：
- 父组件绑定属性和事件
<template>
<router-view v-on:test="testP" v-bind:msg="msg"></router-view>
</template>
<script type="text/javascript">
export default {
data() {
return {
msg: "把我带给router-view吧！"
}
},
methods: {
testP: function (data) {
// 从router-view返回来的数据
console.log(data)
// 打印出来就是
// 把我带给父组件吧！第一次！
// 把我带给父组件吧！第二次！
}
}
}
</script>
- router-view关联的属性和监听动作
<template>
<div>{{msg}}</div>
</template>
<script type="text/javascript">
export default {
props:['msg'],
data() {
return {}
},
watch: {
// 监听父组件的msg的变化
msg: function() {
console.log(this.msg)
// 打印出来就是
// 把我带给router-view吧！
}
},
mounted() {
// this.init()
},
methods: {
init() {
// 第一次向父组件传值
this.$emit("test", "把我带给父组件吧！第一次！")
// 第二次向父组件传值
this.$emit("test", "把我带给父组件吧！第二次！")
}
}
}
注意：
<router-view v-on:test="testP" v-bind:msg="msg"></router-view>
v-on 绑定的函数名 `test`，尽量不要出现大写字母（驼峰命名）(比如 v-on:Aplus_clicked="testP")，否则在某些特殊使用方式的情况下，可能会出现无法触发的问题。
驼峰命名，可能会发生如下报错：
[Vue tip]: Event "aplus_clicked" is emitted in component <Anonymous> but the handler is registered for "Aplus_clicked". Note that HTML attributes are case-insensitive and you cannot use v-on to listen to camelCase events when using in-DOM templates. You should probably use "aplus_clicked" instead of "Aplus_clicked".