vue父子组件传值&声明周期执行顺序

  1. 父子组件周明周期挂载顺序
  2. 父组件异步获取数据传递子组件, 子组件通过watch进行数据处理
  3. 修改了引用类型数据地址导致数据不改变一直为[]
  1. const props = defineProps({
  2.   displayData: Array,
  3. });
  5. let srclist = [];
  6. //由于displayData是父组件异步获取的数据，在子组件挂载时不一定拿得到数据
  7. //父子组件挂载声明周期顺序: 父bc -> 父c -> 父bm ->(子bc到m) ->父m，子组件比父组件慢创建但先挂载
  8. //所以 此处要拿到数据进行处理 必须用watch
  9. watch(
  10.   () => props.displayData,
  11.   () => {
  12.     //正确方式: push不改变地址
  13.     props.displayData.forEach((item) => {
  14.       srclist.push(item.path);
  15.     });
  17.     //错误方式: 赋值改变了srclist的地址,导致给组件的srclist一种为[]
  18.     // srclist = props.displayData.map((item) => item.path);
  19.   }
  20. );

事件委派实现导航栏跳转

三级联动导航栏，点击跳转到对应路由

  1. <router-link>太多会卡, 用a标签+编程式导航
  2. 将跳转方法交给父节点函数goSearch
  3. 利用自定义属性判断是否为a标签
  4. 利用不同自定义属性判断是几级标签
  1. <div class="all-sort-list2" @click="goSearch">
  2.   <!-- 一级 -->
  3.   <div v-for>
  4.     <a
  5.        :data-categoryName="c1.categoryName"
  6.        :data-category1Id="c1.categoryId"
  7.        >{{ c1.categoryName }}</a
  8.       >
  9.       <!-- 二级 -->
  10.       <div v-for>
  11.        <a
  12.           :data-categoryName="c2.categoryName"
  13.           :data-category2Id="c2.categoryId"
  14.           >{{ c2.categoryName }}</a
  15.          >
  16.         <!-- 三级 -->
  17.         <em v-for>
  18.           <a
  19.              :data-categoryName="c3.categoryName"
  20.              :data-category3Id="c3.categoryId"
  21.              >
  22.             {{ c3.categoryName }}</a
  23.             >
  24.         </em>
  25.     </div>
  26.   </div>
  27. </div>
    goSearch(event) {
      //event.target:获取到的是出发事件的元素(div、h3、a、em、dt、dl)
      let node = event.target;
      //给a标签添加自定义属性data-categoryName,全部的字标签当中只有a标签带有自定义属性，别的标签名字----dataset纯属扯淡
      let { categoryname, category1id, category2id, category3id } =
        node.dataset;
      if (categoryname) {
        let loction = { name: "search" };
        let query = { categoryName: categoryname };
        //一定是a标签：一级目录
        if (category1id) {
          query.category1Id = category1id;
          //一定是a标签：二级目录
        } else if (category2id) {
          query.category2Id = category2id;
          //一定是a标签：三级目录
        } else {
          query.category3Id = category3id;
        }
        loction.query = query;
        if(this.$route.params){
          loction.params = this.$route.params;
        }
        this.$router.push(loction);
      }
    },