前言
Vue开发中组件开发是必不可免，组件的意义对某一功能进行封装模块化，在需要使用的地方按需引入，达到功能的复用，简化了开发，提高了效率。在使用组件时，组件的通信尤为重要，子组件将信息传给父组件？下面介绍一种常用方式：组件自定义事件
组件自定义事件
方式一：组件标签上使用自定义方法
子组件
<template><div><p>{{name }}</p><p>{{sex }}</p><p>{{address }}</p><button @click="transData">将人员信息传送给父组件</button></div></template><script>export default {name: "PersonDetail",data() {return {name: "王祎初",sex: "女",address: "中国",};},methods:{//将信息传送给父组件transData(){//personDetailBack父组件自定义事件名称//父组件引用子组件：<PersonDetail @personDetailBack="getPersonDetailBack" />this.$emit("personDetailBack",this.name,this.sex,this.address)}}};</script>
父组件
<template><div><!-- PersonDetail 组件 --><PersonDetail @personDetailBack="getPersonDetailBack" /></div></template><script>import PersonDetail from "./components/PersonDetail";export default {methods: {//子组件信息回调getPersonDetailBack(name, ...params) {//王祎初console.log(name);//['女', '中国']console.log(params);},},};</script>
方式二：使用ref属性对子组件标记自定义方法
子组件
<template><div><p>{{name }}</p><p>{{sex }}</p><p>{{address }}</p><button @click="transData">将人员信息传送给父组件</button></div></template><script>export default {name: "PersonDetail",data() {return {name: "王祎初",sex: "女",address: "中国",};},methods:{//将信息传送给父组件transData(){//personDetailBack父组件自定义事件名称//父组件引用子组件：<PersonDetail @personDetailBack="getPersonDetailBack" />this.$emit("personDetailBack",this.name,this.sex,this.address)}}};</script>
父组件
<template><div><PersonDetail ref="personDetail"/></div></template><script>export default {methods: {//子组件信息回调getPersonDetailBack(name, ...params) {//王祎初console.log(name);//['女', '中国']console.log(params);},},mounted(){//this.$refs.personDetail.$on(自定义方法名,回调方法);this.$refs.personDetail.$on("personDetailBack",this.getPersonDetailBack);}};</script>
解绑自定义事件
以上面的Demo示例，在子组件中可对自定义事件进行解绑
<template><div><p>{{name }}</p><p>{{sex }}</p><p>{{address }}</p><button @click="transData">将人员信息传送给父组件</button><!-- 解绑组件自定义事件 --><button @click="unbindComponent">解绑组件自定义事件</button></div></template><script>export default {name: "PersonDetail",data() {return {name: "王祎初",sex: "女",address: "中国",};},methods:{//将信息传送给父组件transData(){this.$emit("personDetailBack",this.name,this.sex,this.address)},//解绑组件自定义事件unbindComponent() {//this.$off(组件名称)this.$off("personDetailBack");//解绑该组件所有自定义事件//this.$off();},}};</script>
小结
上面使用了两种方式实现了组件的自定义事件： 直接在组件中绑定自定义方法<PersonDetail @personDetailBack="getPersonDetailBack" />利用refs属性绑定自定义组件this.$refs.personDetail.$on("personDetailBack",this.getPersonDetailBack);两种方式都可以实现父子组件的通信，方法2对比方法1实现更繁琐些，但方法2在一些特殊场景可以添加更多业务如页面加载时延时绑定子组件的自定义方法，这时方法2就可以加一个定时器来实现。 解绑自定义事件：this.$off(组件名称)当自定义组件使用原生事件时如click可以使用native属性
