vue 函数冒泡调用与取消

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

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

以下是示例：

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

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

　　print函数如下：

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

　　

运行结果如下：

 

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

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

　　运行结果如下：