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('接受')">
      <p class="title">任务编号：YCWL20180315</p>
      <div class="content">
        <div class="divided clear">
          <div class="img">
            <img src="../../assets/img/renwuqingdan_icon_shi_pressed@3.png">
          </div>
          <div class="con_first">
            <span>霸州</span>
          </div>
          <div class="con_second">9:20,03-15</div>
        </div>
        <div class="divided clear">
          <div class="con_first">寿光羊口</div>
          <div class="con_second">14:20,03-15</div>
          <div class="button_div">
          <button style="background-color:#FE6E00;" @click.stop="receive" class="button">接受</button>
          </div>
        </div>
      </div>
    </div>
    在methods下：
     receive(){
        this.$router.push({
        name:'checkprocess',
      })
    },
    goreportlist(name) {
        this.$router.push({
          name: "taskdetail"
        });
    }

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