Vue项目易错点合集

1.vue2.x---vue-router如何在router-link标签绑定click点击事件、keyup、change等事件

<router-link v-for="(item,index) in productdetailcontent" :key="index" :to="{ path: item.path }" tag='li' @click="showIndicator(index)">
            {{item.title}}
            <div :class="current==index ?'selectedindicator':''"></div>
</router-link>

逻辑上乍一看没有错啊！改了好久，就是不能正常 渲染页面。bug快要气死我了。。。。。。。。

  methods:{
     
      showIndicator(index){
        console.log("this.current");
        this.current = index;
        console.log(this.current);
      }
    }

根据Vue2.0官方文档关于父子组件通讯的原则，父组件通过prop传递数据给子组件，子组件触发事件给父组件。

如果使用router-link标签，加上@click事件，绑定的事件会无效因为：router-link的作用是单纯的路由跳转，会阻止click事件。

但父组件想在子组件上监听自己的click的话，需要加上native修饰符。

所以如果在想要在router-link上添加事件的话需要@click.native这样写。

 @click.native="showIndicator(index)"

参考：

https://segmentfault.com/q/1010000007896386