给组件绑定原生事件

作者: 葵自渡_ | 来源:发表于2019-05-23 11:14 被阅读0次

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

1、一般来说，我们想给组件绑定事件，都会想直接给组件绑定，如下图：

<body>
    <div id="app">
        <child @click="handleComClick"></child>
    </div>
    <script>
        Vue.component('child',{
            template:'<div>hello world</div>'
        })
        var app = new Vue({
            el:'#app',
            methods:{
                handleComClick () {
                    alert('组件绑定事件')
                }
            }
        })
    </script>
</body>

2、可是点击时，却没有任何效果。这是因为我们在组件上绑定的是我们自定义的点击函数，而不是原生的click事件。

3、此时我们尝试在模板的div元素上绑定click事件，并alert一下，页面弹出“模板绑定事件”

<body>
    <div id="app">
        <child @click="handleComClick"></child>
    </div>
    <script>
        Vue.component('child',{
            template:'<div @click="handeChildClick">hello world</div>',
            methods:{
                handeChildClick () {
                    alert("模板绑定事件")
                }
            }
        })
        var app = new Vue({
            el:'#app',
            methods:{
                handleComClick () {
                    alert('组件绑定事件')
                }
            }
        })
    </script>
</body>

click1.png

4、此时再加上this.$emit()就能向父组件传递触发自定义事件了

Vue.component('child',{
          template:'<div @click="handeChildClick">hello world</div>',
          methods:{
              handeChildClick () {
                  alert("模板绑定事件")
                  //子组件向外触发一个自定义的click事件
                  //这里的click就是child组件上绑定的@click
                  this.$emit('click')
              }
          }
      })

5、当然上面的方法太麻烦，我们只需要再child组件上加上一个.native就好了

<body>
    <div id="app">
        <child @click.native="handleComClick"></child>
    </div>
    <script>
        Vue.component('child',{
            template:'<div>hello world</div>',
        })
        var app = new Vue({
            el:'#app',
            methods:{
                handleComClick () {
                    alert('组件绑定事件')
                }
            }
        })
    </script>
</body>