vue父組件調用子組件的方法

vue組件與組件通訊有以下幾種狀況：

• 平行組件

• 父組件與子組件

• 子組件與父組件

它們之間通訊有幾種方法有：

• props

• 自定義事件

• vuex

今天咱們聊一下父組件調用子組件的一種方法

parent.vue

<template>
    <div>
        <h1>我是父組件</h1>
        <child ref="child"></child>
    </div>
</template>
<script>
    import child from './child'
    export default{
        components:{ child },
        methods:{
            parent(){
                this.$.refs.child.childFn()
            }
        }
    }
</script>

child.vue

<template>
    <div>
       <h2>我是子組件</h2>
    </div>
</template>
<script>
    import child from './child'
    export default{
        components:{ child },
        methods:{
            childFn(){
                alert('父組件調用了我')
            }
        }
    }
</script>

歡迎指正和補充！~