技术培训网站,生鲜网站制作,搭建好ftp服务器 如何通过网站访问,大型网站建设建站模板页面应用一个组件#xff0c;采用自定义事件来传递参数
$emit是Vue实例的一个方法#xff0c;它用于触发自定义事件。这些事件可以被父组件监听到#xff0c;从而实现子组件向父组件的通信。
这种方法的好处在于#xff0c;它可以让数据的流动保持单向#xff0c;有助于…页面应用一个组件采用自定义事件来传递参数
$emit是Vue实例的一个方法它用于触发自定义事件。这些事件可以被父组件监听到从而实现子组件向父组件的通信。
这种方法的好处在于它可以让数据的流动保持单向有助于维护组件之间的清晰界限。$emit()方法有两个参数第一个参数代表触发事件的名称第二个参数代表跟随事件要发送的数据。
this.$emit(event-name, payload)
子组件代码
1、绑定事件
2、在方法中进行数据发送
templatebutton clickrefreshHandle刷新/button
/templatescript
export default {name: RefreshBtn,data() {return {target: 1}},methods: {refreshHandle() {this.$emit(onFreshEvent,this.target);this.target 1;}}
}
/script
父组件代码
父组件想要拿到数据需要监听子组件中自定义的事件在事件方法中拿到数据进行操作。
templateollirouter-link to/newsDetails百度新闻/router-linkrouter-link to/newsDetails网易新闻/router-linkrouter-link to/newsDetails头条新闻/router-link/li/olRefreshBtn onFreshEventgetData/p{{newsRefresh}}/p
/templatescript
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
