vue父子组件传参（子组件触发父组件方法）

子元素触发父元素事件四步走

• 子组件定义一个事件，或者写在生命周期里面
• 子组件方法内（生命周期内），触发父元素事件 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>