【vue3入门】-【22】 组件事件

组件事件

在组件的模版表达式中，可以直接使用$emit方法触发自定义事件

触发自定义事件的目的是组件之间传递数据，通过组件事件可以实现子级传递参数给父级

App.vue

<template>
  <ComponentEvent />
</template>
<script>
import ComponentEvent from "./components/componentEvent.vue"

export default{
  components:{
    ComponentEvent
  }
}
</script>

父级： ComponentEnvent.vue

<template>
    <h3>组件事件</h3>
    <!--父级接收来自子级的事件信息传递,必须要和子级中emit中第一个参数一致-->
    <Child @someEvent="getHandle" />
    <p>{{ message }}</p>
</template>
<script>
import Child from "./child.vue"

export default {
    components: {
        Child
    },

    data() {
        return {
            message: "未传递前的数据"
        }
    },
    methods: {
        // data: 接收来自子级的参数
        getHandle(data) {
            console.log("子级元素触发了父级事件", data)
            // 可以变更给data return数据
            this.message = data
        }
    }
}
</script>

子级：child.vue

<template>
    <h3>子组件</h3>
    <button @click="clickEventhandle">传递数据给父组件</button>
</template>
<script>
export default {
    data() {
        return {
            child_msg: "child的 data return数据"
        }
    },
    methods: {
        clickEventhandle() {
            // 自定义事件：实现点击时为父级传递参数
            // this.$emit("someEvent")
            // 传递参数的形式
            // this.$emit("someEvent", "child传递的参数值")
            // 获取data return 中的数据并传递
            this.$emit("someEvent",this.child_msg)
        }
    }
}
</script>

温馨提示

组件之间传递数据的方案：

1. 父传子：props
2. 子传父：自定义事件（this.$emit）

组件事件配合v-model使用

如果是用户输入，我们希望在获取数据的同时发送数据，配合v-model来使用

以下实现，在input输入值发生变化时，利用v-model同步input框绑定的search属性值，再通过watch监听器监听search值发生变化后，将变化后的值使用this.$emit传递给父组件。实现同步变更

app.vue

<template>
  <!-- <ComponentEvent /> -->
  <Main />
</template>
<script>
import ComponentEvent from "./components/componentEvent.vue"
import Main from "./components/Main.vue"

export default{
  components:{
    ComponentEvent,
    Main
  }
}
</script>

父组件：main.vue

<template>
    <h3>Main</h3>
    <p>搜索内容为：{{ search }}</p>
    <SearchComponent @searchEvent="getSearch" />
</template>
<script>
import SearchComponent from "./searchComponent.vue"

export default {
    data() {
        return {
            search: ""
        }
    },
    components: {
        SearchComponent
    },
    methods: {
        getSearch(data) {
            this.search = data
        }
    }

}
</script>

子组件：searchComponent.vue

<template>
    搜索：<input type="text" v-model="search">
</template>

<script>
export default {
    data() {
        return {
            search: ""
        }
    },
    // 监听器
    watch:{
        // 监听到search值变化时，将值传递给父级组件
        search(newValue,oldValue){
            this.$emit("searchEvent",newValue)
        }
    }
}
</script>

以上内容出自
【【2023最新版】Vue3从入门到精通，零基础小白也能听得懂，写得出，web前端快速入门教程】 https://www.bilibili.com/video/BV1Rs4y127j8/?share_source=copy_web&vd_source=94c3d5330a46438059359e8dd2494fe9