Vue父组件调用子组件与子组件调用父组件方法

一、父组件调用子组件方法

1、父组件通过 $refs 来调用子组件

父组件代码

<template>
  <div @click="parent()">
    <children ref="myChild"></children>
  </div>
</template>
<script>
export default {
    data () {
        return {
        }
    },
    methods: {
        parent () {
            this.$refs.myChild.child() // child是子组件的方法
        }
    
    }
}
</script>

子组件代码

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

<script>
export default {
    data () {
        return {
        }
    },
    methods:{
        child() {
            console.log('我是子组件方法')
        }
    }
}
</script>

二、子组件通过 $emit 和 $parent 调用父组件

1、子组件通过 $parent 调用父组件

子组件代码

<template>
    <div @click="child()"></div>
</template>

<script>
export default {
    data () {
        return {
        }
    },
    methods:{
        child () {
            this.$parent.parent() // parent是父组件的方法
        }
    }
}
</script>

父组件代码

<template>
    <div @click="parent()"></div>
</template>

<script>
export default {
    data () {
        return {
        }
    }
}
</script>

2、子组件通过 $emit 调用父组件

子组件代码

<template>
    <div @click="child()"></div>
</template>

<script>
export default {
    data () {
        return {
        }
    },
    methods:{
        child () {
            this.$emit('parent') // parent是父组件的方法
        }
    }
}
</script>

父组件代码

<template>
    <div @parent="parent"></div>
</template>

<script>
export default {
    data () {
        return {
        }
    }
}
</script>