vue 函数冒泡调用与取消

　　在vue开发中，经常会碰到外部组件与内部组件都绑定有函数的情况。

　　有时我们想让两个函数都触发，但是有时我们点击外部组件时并不想让内部组件绑定的函数触发。其实实现的方法非常简单，那就是在内部组件的@click后添加".stop"。

以下是示例：

　　首先是可以冒泡触发的情况：

?

1 2 3

<div @click="print('div')">     <button @click="print('button')">函数冒泡测试</button> </div>

　　print函数如下：

?

1 2 3

print(msg){     console.log(msg) }

　　

运行结果如下：

 

 　　然后是不让其冒泡触发的情况：

?

1 2 3

<div @click="print('div')">     <button @click.stop="print('button')">函数冒泡测试</button> </div>

　　运行结果如下：