vue子组件调用父组件中方法的方式合集

用户10106350

发布于 2022-10-28 11:26:15

8120

发布于 2022-10-28 11:26:15

文章被收录于专栏：WflynnWebWflynnWeb

第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法

父组件代码

<template>
    <div>
        <songCompoent></songCompoent>
    </div>
</template>

<script>
    const songCompoent = () => import('@testCp/songCompoent')

    export default {
        methods: {
            fatherFnOne () {
                console.log('我是父方法1')
            },
        },
        components: {
            songCompoent
        },
    }
</script>

子组件代码

<template>
    <div>
        <button @click="sonFn">我是调用父组件方法的按钮</button>
    </div>
</template>

<script>
    export default {
        methods: {
            sonFn () {
                this.$parent.fatherFnOne() // 调用父组件的fatherFnOne方法
            },
        },
    }
</script>

第二种方法是在子组件里用`$emit`向父组件触发一个事件，父组件监听这个事件就行了。

父组件代码

<template>
    <div>
        <songCompoent @fatherFn="fatherFnTwo"></songCompoent>
    </div>
</template>

<script>
    const songCompoent = () => import('@testCp/songCompoent')

    export default {
        methods: {
            fatherFnTwo () {
                console.log('我是父方法2')
            },
        },
        components: {
            songCompoent
        },
    }
</script>

子组件代码

<template>
    <div>
        <button @click="sonFn">我是调用父组件方法的按钮</button>
    </div>
</template>

<script>
    export default {
        methods: {
            sonFn () {
                this.$emit('fatherFn') // 调用父组件的fatherFnTwo方法
            },
        },
    }
</script>

第三种是父组件把方法传入子组件中，在子组件里直接调用这个方法

父组件代码

<template>
    <div>
        <songCompoent :fatherFnThree="fatherFnThree"></songCompoent>
    </div>
</template>

<script>
    const songCompoent = () => import('@testCp/songCompoent')

    export default {
        methods: {
            fatherFnThree () {
                console.log('我是父方法3')
            },
        },
        components: {
            songCompoent
        },
    }
</script>

子组件代码

<template>
    <div>
        <button @click="sonFn">我是调用父组件方法的按钮</button>
    </div>
</template>

<script>
    export default {
        props: { // String Number Boolean Array Object Function || validator (value) {}
            fatherFnThree: { // 父组件传过来的方法 fatherFnThree
                type: Function,
                required: false,
                default: function () {

                }
            },

        },
        methods: {
            sonFn () {
                this.fatherFnThree() // 调用父组件的fatherFnThree方法
            },
        },
    }
</script>

综合代码

父组件

<template>
    <div>
        <songCompoent @fatherFn="fatherFnTwo" :fatherFnThree="fatherFnThree"></songCompoent>
    </div>
</template>

<script>
    const songCompoent = () => import('@testCp/songCompoent')

    export default {
        methods: {
            fatherFnOne () {
                console.log('我是父方法1')
            },
            fatherFnTwo () {
                console.log('我是父方法2')
            },
            fatherFnThree () {
                console.log('我是父方法3')
            },
        },
        components: {
            songCompoent
        },
    }
</script>

子组件

<template>
    <div>
        <button @click="sonFn">我是调用父组件方法的按钮</button>
    </div>
</template>

<script>
    export default {
        props: { // String Number Boolean Array Object Function || validator (value) {}
            fatherFnThree: { // 父组件传过来的方法 fatherFnThree
                type: Function,
                required: false,
                default: function () {

                }
            },

        },
        methods: {
            sonFn () {
                this.$parent.fatherFnOne() // 调用父组件的fatherFnOne方法
                this.$emit('fatherFn') // 调用父组件的fatherFnTwo方法
                this.fatherFnThree() // 调用父组件的fatherFnThree方法
            },
        },
    }
</script>

消息中间件之ActiveMQ

链接：https://pan.baidu.com/s/16vCBGIl5hN_1JTQy8NZ2Vg

提取码：1443

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2020-06-12，如有侵权请联系 cloudcommunity@tencent.com 删除

activemq