vue自定义事件传递数据

页面应用一个组件，采用自定义事件来传递参数

$emit是Vue实例的一个方法，它用于触发自定义事件。这些事件可以被父组件监听到，从而实现子组件向父组件的通信。

这种方法的好处在于，它可以让数据的流动保持单向，有助于维护组件之间的清晰界限。$emit()方法有两个参数，第一个参数代表触发事件的名称，第二个参数代表跟随事件要发送的数据。

this.$emit('event-name', payload)

子组件代码：

1、绑定事件

2、在方法中进行数据发送

<template><button @click="refreshHandle">刷新</button>
</template><script>
export default {name: "RefreshBtn",data() {return {target: 1}},methods: {refreshHandle() {this.$emit("onFreshEvent",this.target);this.target += 1;}}
}
</script>

父组件代码：

父组件想要拿到数据，需要监听子组件中自定义的事件，在事件方法中拿到数据进行操作。

<template><ol><li><router-link to="/newsDetails">百度新闻</router-link><router-link to="/newsDetails">网易新闻</router-link><router-link to="/newsDetails">头条新闻</router-link></li></ol><RefreshBtn @onFreshEvent="getData"/><p>{{newsRefresh}}</p>
</template><script>
import RefreshBtn from "../components/RefreshBtn.vue"
export default {name: "News",data() {return {newsRefresh: ""}},components: {RefreshBtn},methods: {getData(target) {target === 1 ? this.newsRefresh = "第一次刷新" : this.newsRefresh = "不是第一次刷新"}}
}
</script>