vue.js利用props实现子传父

一般情况下props只能是父传子，但在子组件接收的时候可以是任意类型的。

我们这时可以利用props传递一个函数（function）给子组件，即可实现props子传父。

//父组件

<template>
    <h3>父组件</h3>
    <p>{{ massage }}</p>
    <props :onEvent="DataFn" />
</template>
<script>
import Props from './props.vue'

export default {
    data(){
        return {
            massage:''
        }
    },
    components:{
        Props
    },
    methods:{
        DataFn:function(data){
                this.massage = data
            }
    }
}
</script>

在子组件执行函数

//子组件props

<template>
    <h3>子组件</h3>
    <p>{{ onEvent("子组件传递的数据") }}</p>
</template>
<script>
export default {
    data(){
        return{

        }
    },
    props:{
        onEvent:Function
    },
    methods:{
    }
}
</script>

输出结果，这里自动执行函数的。

如果需要主动触发，可以自己添加事件，如给子组件添加点击事件

//子组件props

<template>
    <h3>子组件</h3>
    <!-- <p>{{ onEvent("子组件传递的数据") }}</p> -->
    <button @click="Hand">传递</button>
</template>
<script>
export default {
    data(){
        return{

        }
    },
    props:{
        onEvent:Function
    },
    methods:{
        Hand(){
            this.onEvent('子组件点击传递')
        }
    }
}
</script>

点击前：

点击后：

感谢阅读，如有问题请多指点！