给组件绑定原生事件

作者: 椰果粒 | 来源:发表于2018-08-03 10:33 被阅读0次

Vue.js第3课-深入理解Vue组件（part02）
(十二)给组件绑定原生事件
element ui的el-input如何监听回车键
自定义事件深入
vue中@click事件无效
Vue Note
给组件绑定原生事件
给组件绑定原生事件
给组件绑定原生事件
给组件绑定原生事件

如果就是想给子组件添加原生的事件，就用@click.native=""

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>给组件绑定原生事件</title>
    <script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <counter @click.native="handleClick"></counter>
    </div>
    <script>
        var counter = {
            template : '<div>{{content}}</div>',
            data : function(){
                return {
                    content : "hello world"
                }
            }
        }
        var vm = new Vue({
            el : "#app",
            components : {
                counter : counter
            },
            methods : {
                handleClick : function(){
                    alert('click');
                }
            }
        })
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>给组件绑定原生事件</title>
    <script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 这里绑定的不是原生的click，而是自定义的，是从子组件传递过来的 -->
        <counter @click="handleClick"></counter>
    </div>
    <script>
        var counter = {
            template : '<div @click="handleChildClick">{{content}}</div>',
            data : function(){
                return {
                    content : "hello world"
                }
            },
            methods : {
                handleChildClick : function(){
                    alert("child click");
                    // 将子组件点击事件传递给父组件
                    this.$emit("click");
                }
            }
        }
        var vm = new Vue({
            el : "#app",
            components : {
                counter : counter
            },
            methods : {
                handleClick : function(){
                    alert('click');
                }
            }
            
        })
    </script>
</body>
</html>