vue.js中修饰符.stop的用法

vue.js中修饰符.stop的用法

• 使用vue阻止子级元素的click事件冒泡，用@click.stop

• 例如：

  <div id="app">
      <div v-on:click="dodo">
          <button v-on:click="doThis">阻止单击事件继续传播button>
      div>
  div>
   <script>
      var app = new Vue({
          el: "#app",
          data: {
              name: "Vue.js"
          },
          methods: {
              doThis: function () {
                  alert("noclick");
              },
              dodo: function () {
                  alert("dodo");
              }
          }
      });
  script>

• 再例如：用@click.stop

   <div id="app">
        <div v-on:click="dodo">
            <button v-on:click.stop="doThis">阻止单击事件继续传播button>
        div>
    div>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                name: "Vue.js"
            },
            methods: {
                doThis: function () {
                    alert("noclick");
                },
                dodo: function () {
                    alert("dodo");
                }
            }
        });
    script>

• 结果：只弹出“noclick”，就不会触发dodo这个方法.
• 在项目中用到额例子：

    <div class="taskList_con" @click="goreportlist('接受')">
      
class="title">任务编号：YCWL20180315
      <div class="content">
        <div class="divided clear">
          <div class="img">
            "../../assets/img/[email protected]">
          div>
          <div class="con_first">
            霸州
          div>
          <div class="con_second">9:20,03-15div>
        div>
        <div class="divided clear">
          <div class="con_first">寿光羊口div>
          <div class="con_second">14:20,03-15div>
          <div class="button_div">
          "background-color:#FE6E00;" @click.stop="receive" class="button">接受
          div>
        div>
      div>
    div>
    在methods下：
     receive(){
        this.$router.push({
        name:'checkprocess',
      })
    },
    goreportlist(name) {
        this.$router.push({
          name: "taskdetail"
        });
    }

• 结果：点击div里任意部分可跳转到taskdetail详情页面，但是点击接受按钮跳转到checkprocess安检列表页面。用@click.stop阻止了事件冒泡的发生。