（2）事件参数

事件参数可以获取 event 对象和通过事件传递数据

1. 获取event对象

<script>
export default{
    data(){
        return {
            count: 0
        }       
    },

    methods:{
        	// event对象
            addCount(e){
                // Vue的event对象，就是原生JS中的event对象
                console.log(e.target) // 获取当前点击的元素
                e.target.innerHTML = 'Add'+this.count // 修改当前点击元素的内容
                this.count++
            }
        }
    }
</script>
<template>
<h3>内联事件处理</h3>
<button @click="addCount">Add</button>
<p>{{ count }}</p>
</template>

2. 传递参数

<script>
export default{
    data(){
        return {
            count: 0
        }       
    },

    methods:{
            addCount(msg){
                console.log(msg)
                this.count++
            }
        }
    }
</script>
<template>
<h3>内联事件处理</h3>
<button @click="addCount('hello')">Add</button>
<p>{{ count }}</p>
</template>

3. 获取列表里的内容

<script>
export default{
    data(){
        return {
            names:['zhangsan','lisi','wangwu']
        }       
    },

    methods:{
        getNameHandle(name){
                console.log(name)
            }
        }
    }
</script>
<template>
<h3>内联事件处理</h3>
<!-- 当前元素的点击事件，打印当前元素的name -->
<p @click="getNameHandle(name)" v-for="(name,index) of names" :Key="index">{{ name }}</p>
</template>

4. 传递参数过程中获取event

<script>
export default{
    data(){
        return {
            names:['zhangsan','lisi','wangwu']
        }       
    },

    methods:{
        getNameHandle(name,e){
                console.log(name)
                console.log(e.target)
            }
        }
    }
</script>
<template>
<h3>内联事件处理</h3>
<!-- 当前元素的点击事件，打印当前元素的name 和点击事件对象 -->
<p @click="getNameHandle(name,$event)" v-for="(name,index) of names" :Key="index">{{ name }}</p>
</template>