一次面包屑bug
使用面包屑时,要显示路由params的参数,面包屑的值为一个数组
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item class="item" v-for="(item, index) in items" :key="index">{{ item }}</el-breadcrumb-item>
</el-breadcrumb>
由
于组件的嵌套,需要在在外层组件监控router.$params的参数变化,使用深度监控
watch: {
$route: {
handler() {
this.breadcrumbItems[2] = this.$route.params.id;
console.log("变化",this.breadcrumbItems);
//深度监听
this.$refs.breadcrumb.changeId(this.breadcrumbItems);
},
deep: true,
},
},
并将监控到的变量变化传递给子组件,这里使用ref调用子组件函数传参,
<base-breadcrumb
class="breadcrumb"
:items="breadcrumbItems"
ref="breadcrumb"
></base-breadcrumb>
///
courseTest() {
console.log("跳转");
this.$router.push({ name: "coursepractice" });
},
在调用面包屑的子组件中,由于在面包屑中渲染数组,所以,直接给data赋值时不会再视图层有变化的,需要使用vue对数组的方法,这里使用splice。
//面包屑组件
methods:{
changeId(value){
console.log("面包屑改变",value);
this.items.splice(2,1,value[2]);
}
}
注意,vue中想要监控数组变化,对数组的更新必须使用vue提供方法
既然说到看父子组件传参,我们使用props时要注意,父组件向子组件传递的值只会在mount阶段挂载到页面一次,之后便不再执行这个阶段。那么就存在一个问题,这种方法无法使得父组件能动态地向子组件传递数据,在父组件使用v-bind绑定props参数时,子组件的props变化,但不会在视图层中变化。
注意:data中的变量能被视图层动态显示,因此:
- 使用watch监控props变化,讲其赋值给data,以此达到父组件props动态传值效果