Vue.js学习系列(四十四)-- 自定义事件
Vue.js学习系列(四十四)-- 自定义事件
博为峰教研组 发表于11个月前
Vue.js学习系列(四十四)-- 自定义事件
  • 发表于 11个月前
  • 阅读 14
  • 收藏 0
  • 点赞 0
  • 评论 0

新睿云服务器60天免费使用,快来体验!>>>   

父组件是使用 props 传递数据给子组件,但如果子组件要把数据传递回去,就需要使用自定义事件

我们可以使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口(Events interface),即:

t  使用 $on(eventName) 监听事件

t  使用 $emit(eventName) 触发事件

另外,父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。

以下我们通过记录按钮点击的次数这个实例来学习在vue.js中如何自定义事件。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<script src="src/vue.min.js"></script>

</head>

<body>

<div id="app">

<div id="counter-event-example">

<p>{{total}}</p>

<btn v-on:increment="incrementTotal"></btn>

<btn v-on:increment="incrementTotal"></btn>

</div>

</div>

<script type="text/javascript">

Vue.component('btn',{

template:'<button  v-on:click="increment">{{counter}}</button>',

data:function () {

return{

counter:0

}

},

methods:{

increment:function () {

this.counter+=1

this.$emit('increment')

}

},

})

new Vue({

el:"#counter-event-example",

data:{

total:0

},

methods:{

incrementTotal:function () {

this.total+=1

}

}

})

</script>

 

</body>

</html>

运行结果如下:

点击下面的2个按钮中任意按钮,该按钮上的数字会累加,同时最上面的数字也会累加。

 

如果你想在某个组件的根元素上监听一个原生事件。可以使用 .native 修饰 v-on 。例如:

<component v-on:click.native="doTheThing"></component>

标签: Vue.js 自定义 事件
  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 46
博文 1224
码字总数 479077
×
博为峰教研组
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: