子元素触发父元素事件四步走
- 子组件定义一个事件，或者写在生命周期里面
- 子组件方法内（生命周期内），触发父元素事件 this.$emit("方法名"，参数)；
- 把子组件引入父组件内，<子组件 @方法名=“父组件内方法”></子组件>
注意，父组件内‘@方法名’要与
子组件内this.$emit("方法名"，参数)，两个方法名保持一致 - 父组件内方法自己的逻辑
子组件 child.vue
<template>
<div>
<button @click="clickMe">
点击我触发事件
</button>
</div>
</template>
<script>
export default{
data(){
return{}
}
methods:{
clickMe(){
//此处的cccc要与父组件的保持一致
this.$emit("cccc",param)
}
}
}
</script>
父组件
<template>
<div>
//此处的cccc要与子组件的保持一致
<vChild @cccc="parentMethods"></vChild>
</div>
</template>
<script>
import vChild from './child.vue'
export default{
data(){
return{}
},
components:{
vChild
},
methods:{
parentMethods(param){
console.log(param);
//do someThing
}
}
}
</script>
除此之外还有一种比较直接的方法
- 新建一个js文件
- 子组件引入新建的bus
- 用bus触发
on方法
bus.js
import Vue from 'vue'
export var bus = new Vue()
子组件
<template>
<div @click="pass">
表单传值
</div>
</template>
<script>
import {bus} from '../../../utils/bus'
export default {
name: "Child",
data() {
return {}
},
components: {},
mounted() {
},
methods: {
pass(){
alert("1112")
bus.$emit("father",'admin');
},
},
}
</script>
<style scoped>
</style>
父组件
<template>
<div>
<pass-child></pass-child>
<div>
父子传值
</div>
</div>
</template>
<script>
import PassChild from './Child'
import {bus} from '../../../utils/bus'
export default {
name: "PassIndex",
data() {
return {}
},
components: {
PassChild
},
mounted() {
bus.$on('father',(param)=>{
console.log(param)
})
},
methods: {},
}
</script>
<style scoped>
</style>
