Vue 父子组件动态数据，路由params监控，数组操作

一次面包屑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动态传值效果