vue2 vue3響應式原理,vue2.0 之事件處理器

 2023-12-25 阅读 336 评论 0

摘要:事件綁定v-on(內置事件) <template><div><a v-if="isPartA">partA</a><a v-else>no data</a><button v-on:click="toggle">toggle</button><input @keydown.enter="on

事件綁定v-on(內置事件)

<template><div><a v-if="isPartA">partA</a><a v-else>no data</a><button v-on:click="toggle">toggle</button><input @keydown.enter="onkeydown"></div>
</template><script>export default {data () {return {isPartA: true}},methods: {toggle () {this.isPartA = !this.isPartA},onkeydown () {console.log('on key down')}}}
</script><style>html {height: 100%;}
</style>

回車,輸出如下結果

vue2 vue3響應式原理、

備注:v-on簡寫為@

?

事件綁定v-on(自定義事件)

子組件hello.vue

<template><div>{{ hello }}<button @click="emitMyEvent">emit</button></div>
</template><script>export default {data () {return {hello: 'i am component hello'}},methods: {emitMyEvent () {this.$emit('my-event', this.hello)}}}
</script><style scoped>/**/
h1 {height: 100px;
}
</style>

vue中的事件有哪些,?App,vue

<template><div><a v-if="isPartA">partA</a><a v-else>no data</a><button v-on:click="toggle">toggle</button><input @keydown.enter="onkeydown"><comH @my-event="onComhMyEvent"></comH></div>
</template><script>import comH from './components/hello.vue'export default {components: {comH},data () {return {isPartA: true}},methods: {toggle () {this.isPartA = !this.isPartA},onkeydown () {console.log('on key down')},onComhMyEvent (parmformA) {console.log('onComhMyEvent' + parmformA)}}}
</script><style>html {height: 100%;}
</style>

點擊emit按鈕,輸出結果如下

vue銷毀事件,1、父組件App.vue引入hello.vue子組件

2、子組件定義emitMyEvent方法,調用父組件my-event自定義事件

3、App.vue中觸發onComhMyEvent方法,在控制臺生成日志內容

轉載于:https://www.cnblogs.com/shhnwangjian/p/7082652.html

版权声明:本站所有资料均为网友推荐收集整理而来,仅供学习和研究交流使用。

原文链接:https://hbdhgg.com/3/195026.html

发表评论:

本站为非赢利网站,部分文章来源或改编自互联网及其他公众平台,主要目的在于分享信息,版权归原作者所有,内容仅供读者参考,如有侵权请联系我们删除!

Copyright © 2022 匯編語言學習筆記 Inc. 保留所有权利。

底部版权信息