在项目当中，遇到一个问题。当父页面的某个属性变化时，需要router-view中的页面根据不同的值进行不同的操作。
仔细想一下，其实类似父子组件之间的传值。
实现过程如下：
- 父组件绑定属性和事件
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<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关联的属性和监听动作
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<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", "把我带给父组件吧！第二次！") } } } |
注意：
|
1 |
<router-view v-on:test="testP" v-bind:msg="msg"></router-view> |
v-on 绑定的函数名 test，尽量不要出现大写字母（驼峰命名）(比如 v-on:Aplus_clicked="testP")，否则在某些特殊使用方式的情况下，可能会出现无法触发的问题。
驼峰命名，可能会发生如下报错：
|
1 |
[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". |