1. When binding events to vue components, native must be added, otherwise it will be considered that the event that is being listened to from the Item component.
2, equivalent to in a child component: The child component handles the click event internally and then sends the click event outward: $emit("click".fn)
<Item @ = "shijian()"></Item>
Supplementary knowledge:vue——Intercomponents (Brothers) Event Distribution and Reception
Method 1
Before initializing vue, add an empty vue object named event to data
new Vue({
render: h => h(App),
router,
store,
data: {
event: new Vue()
}
}).$mount('#app')
Component 1:
methods: {
addCart (e) {
let pos = {
x: parseInt(().x + 4),
y: parseInt(().y + 4)
}
this.$.$emit('ballPosition', pos)
}
}
Component Two:
created () {
this.$.$on('ballPosition', (target) => {
this._initBall(target)
})
},
methods: {
_initBall (target) {
= true
= target
}
}
Complete case:
Parabolic ball animation:
created () {
this.$.$on('ballPosition', (target) => {
this._initBall(target)
})
},
methods: {
_initBall (el) {
= true
= el
},
beforeEnter (el) {
let pos = ()
= `${}px`
= `${}px`
},
enter (el, done) {
// Trigger animation repaint
let [x, y] = [parseInt(this.$().x + 4), parseInt(this.$().y + 8)]
= `${y}px`
= `${x}px`
= `left .1s linear, top .1s cubic-bezier(.63,.02,.96,.56)`
done()
},
afterEnter () {
= false
}
},
Method 2
Central Communication: let eventVue = new Vue()
A methods:{function(){eventVue.$emit('custom event','data')}}
B created(){eventVue.$on('A The event name sent by the sending','function')}
Central Communications:
let eventVue = new Vue()
Brother component A is as follows:
<template>
<div class="components-a">
<button @click="abtn">AButton</button>
</div>
</template>
<script>
import eventVue from '../../js/'
export default {
name: 'app',
data () {
return {
‘msg':"I am component A"
}
},
methods:{
abtn:function(){
eventVue.$emit("myFun",) //The $emit method will trigger an event }
}
}
</script>
Brother component B is as follows:
<template>
<div class="components-a">
<div>{{btext}}</div>
</div>
</template>
<script>
import eventVue from '../../js/'
export default {
name: 'app',
data () {
return {
'btext':"I am the content of component B"
}
},
created:function(){
();
},
methods:{
bbtn:function(){
eventVue.$on("myFun",(message)=>{ //It is best to use the arrow function here, otherwise there will be problems with this pointing = message
})
}
}
}
</script>
The above vue component addition event @ operation is all the content I share with you. I hope you can give you a reference and I hope you can support me more.