vue 實例事件

時間 2019-11-10

標籤 vue 實例事件简体版

原文原文鏈接

好處是在構造器外部增長一個構造器內部事件html

有三個實例事件方法：vue

- $on() // 點擊一次執行一次jquery

- $once() // 只執行一次app

- $off() // 關閉事件方法ui

外部方法經過 $emit 方法調用this

代碼示例以下：htm

<!DOCTYPE html>

<head>

<title>example-3</title>

</head>

<body>

<h1>example-3</h1>

<hr>

</div>

<p><button onclick="reduce()">reduce</button></p>

<p><button onclick="reduceOnce()">reduceOnce</button></p>

var app = new Vue({

el: '#app',

data() {

return {

num: 1

}

methods: {

add() {

this.num++

}

})

app.$on('reduce', function () {

console.log('執行了reduce方法');

this.num--

})

app.$once('reduceOnce', function () {

console.log('執行了一次的方法');

this.num--

})

function reduce() {

app.$emit('reduce')

}

function reduceOnce() {

app.$emit('reduceOnce')

}

function off() {

app.$off('reduce')

}

</script>

</body>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。