vue绑定原生事件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue不使用绑定原生事件</title>
  <script src="vue.js"></script>
</head>
<body>
<div id="app">
  <child @click="handleClick"></child>
</div>
<script>
  Vue.component('child',{
    template:'
点击
'
, methods:{ handleChildClick(){ alert('handleChildClick'); this.$emit('click'); } } }); var app=new Vue({ el:'#app', methods:{ handleClick(){ alert('click'); } } }) </script> </body> </html>

对比:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue绑定原生事件</title>
  <script src="vue.js"></script>
</head>
<body>
<div id="app">
  <child @click.native="handleClick"></child>
</div>
<script>
  Vue.component('child',{
    template:'
点击
'
}); var app=new Vue({ el:'#app', methods:{ handleClick:function(){ alert('click'); } } }) </script> </body> </html>

你可能感兴趣的:(vue)