vue组件间事件调用

1.父组件调用子组件的方法

子组件见面绑紧refname 父组件通过$refs.refname获取

<template>
    <div>
        <h1>子组件</h1>
    </div>
</template>
<script>
export default {
    methods:{
        childClick(e){
          return  e
        }
    }
}
</script>

template>
    <div>
        <h1>组件间的事件测试</h1>
        <Child  ref="myChild" />
        <button @click="getChildMethods">获取子组件方法</button>
    </div>
</template>
<script>
import Child from  './child'
export default {
    components:{
        Child
    },
    methods:{
        getChildMethods(){
           console.log(this.$refs.myChild.childClick('调用子组件事件'))
        }
    }
}
</script>

2.子组件调用父组件的方法

2.1 通过$parent来获取

<template>
    <div>
        <h1>子组件</h1>
        <button @click="getParent1">获取父组件的方法</button>
        <button @click="getParent2">获取父组件的方法</button>
        <button @click="getParent3">获取父组件的方法</button>

    </div>
</template>
<script>
export default {
    methods:{
       getParent1(){
           this.$parent.parentsMthods()
       },
       getParent2(){
       },
       getParent3(){
       }
    }
}
</script>

<template>
    <div>
        <h1>组件间的事件测试</h1>
        <Child/>
    </div>
</template>
<script>
import Child from  './child'
export default {
    components:{
        Child
    },
    methods:{
        parentsMthods(){
            console.log('父组件方法1')
        }
    }
}
</script>

2.2 通过$emit推送事件 子组件标签通过自定义事情名接收

<template>
    <div>
        <h1>子组件</h1>
        <button @click="getParent1">获取父组件的方法</button>
        <button @click="getParent2">获取父组件的方法</button>
        <button @click="getParent3">获取父组件的方法</button>

    </div>
</template>
<script>
export default {
    methods:{
       getParent1(){
           this.$parent.parentsMthods()
       },
       getParent2(){
           this.$emit('parentsMthods')
       },
       getParent3(){
       }
    }
}
</script>

<template>
    <div>
        <h1>组件间的事件测试</h1>
        <Child @parentsMthods='parentsMthods' />
    </div>
</template>
<script>
import Child from  './child'
export default {
    components:{
        Child
    },
    methods:{
        parentsMthods(){
            console.log('父组件方法2')
        }
    }
}
</script>

2.3 子组件标签自定义 子组件标签内部直接通过props接收

<template>
    <div>
        <h1>子组件</h1>
        <button @click="getParent1">获取父组件的方法</button>
        <button @click="getParent2">获取父组件的方法</button>
        <button @click="getParent3(111)">获取父组件的方法</button>

    </div>
</template>
<script>
export default {
    props:['getParent3'],
    methods:{
       getParent1(){
           this.$parent.parentsMthods()
       },
       getParent2(){
           this.$emit('parentsMthods')
       },
      
    }
}
</script>

<template>
    <div>
        <h1>组件间的事件测试</h1>
        <Child :getParent3='parentsMthods' />
    </div>
</template>
<script>
import Child from  './child'
export default {
    components:{
        Child
    },
    methods:{
        parentsMthods(a){
            console.log(a)
        }
    }
}
</script>