1.组件事件

Parent.Vue中的代码

<template>

    <h3>Parent</h3>
    <br/>
    <Child @someEvent="getChildDataHandler"/>
    <p>{{ message }}</p>
    </template>
    
    <script>
    //1.引入组件
    import Child from './Child.vue';
    export default{
        data(){
            return{
              message:""
                        
            }
        },
      //2.注册组件
      components:{
        Child
    
      },
      methods:{
        getChildDataHandler(data){
          console.log("触发了",data)
          this.message=data
        }
      }
    }
    </script>
    
    <style scoped></style>

Child.vue中的代码：

<template>
    <h3>Child</h3>
    <button @click="clickEventHandler">传递数据给父元素</button>
</template>
    
<script>

export default{
    data(){
        return{
            name:"zhangsan"

        }
    },
    methods:{
        clickEventHandler(){
            
            //触发父元素中的someEvent事件并把child数据传递给这个someEvent事件绑定的方法
            this.$emit("someEvent",this.name)
            console.log("传递数据成功")
        }
    }
}
</script>
    
<style scoped></style>

2.组件事件配合v-model使用

Main.Vue代码

<template>
   <h3>Main</h3>
   <Search @searchEvent="searchHandler"/>
   <p>{{ message }}</p>
</template>

<script>
import Search from "./SearchComponent.vue"
export default{
    data(){
        return {
            message:""
        }
    },
    components:{
        Search
    },
    methods:{
        searchHandler(data){
            this.message=data

        }
    }
}
</script>

Search.vue代码

<template>
    <input type="text" v-model="search" @input.enter="inputHandler">
</template>

<script>
export default{
    data(){
        return {
            search:"test"
        }
    },
    methods:{
        inputHandler(){
            this.$emit("searchEvent",this.search)
        }
    }
}
</script>