Vue 自定义事件实现子组件给父组件传递数据

定义自定义事件

<template>
    <div id="app">
        <!--
            *自定义事件定义方式一
            func是自定义事件名， getData为事件的回调
        -->
        <PropsDemo @func="getData"></PropsDemo>
        <!--
            *自定义事件定义方式二
        -->
        <PropsDemo ref="refFunc"></PropsDemo>
    </div>
</template>

<script>
    import PropsDemo from "@/components/RefAndPropsDemo/PropsDemo";

    export default {
        name: 'App',
        components: {PropsDemo},
        methods: {
            //准备一个function
            getData(data) {
                console.log("===", data)
            }
        },
        mounted() {
            /**
             * @param event 自定义的事件名
             * @param callback 自定义事件的回调
             */
            this.$refs.refFunc.$on('func', this.getData)
            //绑定自定义事件(只能被触发一次)
            //this.$refs.refFunc.$once('func', this.getData)
        }

    }
</script>

触发自定义事件

<template>
    <div>
        <button @click="dataToParent">点击触发传入的function</button>
    </div>
</template>

<script>
    export default {
        name: "PropsDemo",
        // 声明接收
        props: ['func'],
        methods: {
            dataToParent(event){
                console.log(event)
                //触发自定义事件
                /**
                 * @param event 自定义的事件名
                 * @param args 给事件function的参数
                 */
                this.$emit("func","子给父的数据")
            }
        },
        beforeDestroy() {
            /**
             * @param event 自定义的事件名
             */
            //解绑一个自定义事件
            this.$off('func')
            //解绑多个自定义事件
            // this.$off(['func'])
            //解绑所有的自定义事件
            // this.$off()
        }
    }
</script>