写这篇文章,是看到网上的很多博客都是第二个人复制第一个人,第三个人复制第二个人,第四个人复制第三个人的,所以,今天特意来写篇关于组件之间通讯的文章,如果有不足之处,还望大家积极提出来。
关于数据传递今天暂时不提,主要写的是关于方法的传递:
父组件可以使用 props 把数据传给子组件。
子组件可以使用 $emit 触发父组件的自定义事件。
父组件传方法给子组件
父组件
<Reply @reset="fetchData" :status="discuss.status"></Reply>
//将自己的fetchData传给子组件
methods: {
async fetchData () {
let { data } = await getDiscussDetailApi(this.$route.params.id)
this.discuss = data
}
}
子组件
<a-button class="nimbus-btn" @click="closeDiscuss">关闭主题</a-button>
async closeDiscuss () {
let { data } = await toggleDiscussApi(this.$route.params.id)
cbSuccess(data, _ => {
this.$emit('reset') //调用父组件传过来的reset,fetchData方法
})
}
子组件调用父组件的方法
父组件
<span class="btn-txt" @click="showAssign">设置指派人</span>
<span v-else class="btn-txt" @click="showAssign">修改指派人</span>
<AssignModal ref="AssignModal"
:teamId="teamId"
:userIds="userIds"
</AssignModal>
showAssign () {
this.$refs.AssignModal.showModal(this.assignors) //调用子组件的showModal
}
子组件
showModal (members) {
this.assign.userIds = this.userIds
this.members = members
this.assignShow = true
}
子组件调用另一个子组件中的方法(或称为兄弟组件之间的通讯)
父组件
<DiscussReply ref="DiscussReply" class="mb22"></DiscussReply>
<Reply @repled="repled" :status="discuss.status"></Reply>
//父再将子组件的方法传给另一个子组件
repled () {
this.$refs.DiscussReply.fetchData() //调用子组件中的fetchData
}
被调用方法的子组件
methods: {
async fetchData () {
let { data } = await getDiscussReplysApi(this.$route.params.id)
this.replys = data.list || []
}
}
调用方法的子组件
<a-button class="nimbus-btn" @click="submit('close')">回复并关闭</a-button>
<a-button class="nimbus-btn" @click="submit()">回复</a-button>
async submit (type) {
let _reply = this.reply
if (!_reply.content) {
this.$message.error('请输入内容')
return
}
_reply.discussId = this.$route.params.id
_reply.type = type
let { data } = await replyDiscussApi(_reply)
cbSuccess(data, _ => {
this.$emit('repled') //调用父组件传过来的方法
_reply = {
content: ''
}
})
}