vue组件之间函数调用

父组件调用子组件：

html:

<Child ref="myChild"></Child>

js:

// 父组件
// 引入子组件
import Child from './Child'
export default {
  // 注册子组件
  components: {Child},
  created () {
    // 调用子组件中的childMethod，需要给子组件添加属性ref
    this.$refs.myChild.childMethod("hello")
  },
  methods: {
      parentMethod (data) {
       console.log(data)
      }
  }
}

子组件：

// 子组件
export default {
    methods: {
        childMethod (data) {
            console.log(data)
        },
        parentMethod (data) {
            // 子组件调用父组件函数
            // 如何这样不行，可以考虑使用$emit、vuex等其他方法
            this.$parent.parentMethod(data)
        }
    }
}

子组件调用父组件：

父组件：

<template>
      <div class="wrapper">
            <VLink @parentMethod="macSelect"></VLink >
      </div>
</template>
<script>
import VLink from "../components/VLink.vue";  
export default{
    components:{
        VLink 
    },
    method:{
        macSelect(){
          alert("嘿嘿")；
        }
    }
}
</script>

子组件：

<template>
    <div class="bet-action">
        <span class="mac-select" @click="childMethod">机选</span>
    </div>
</template>
<script>
    export default{
      methods: {
          childMethod() {
              console.log('请求父组件方法');
              this.$emit('parentMethod');  //使用$emit()引入父组件中的方法
          }
      },
    }
</script>