vue 子组件触发父组件的方法

方法一：

<template>//子组件
    <button @click="submit">提交</button>
</template>
<script>
export default {
  methods: {
    submit: function () {
      // 子组件中触发父组件方法并传值
      this.$emit('parentf', 'xxxx')
    }
  }
}
</script>

<template>//父组件
    <child @parentf="parentf"></child>
</template>
<script>
export default {
  methods: {
    parentf: function (str) {
      alert(str)
    }
  }
}
</script>

方法二：

<template>//子组件
    <button @click="submit">触发父方法</button>
</template>
<script>
export default {
  props: {
    parentF: {
      type: Function,
      default: null
    }
  },
  methods: {
    submit: function () {
      if (this.parentF) {
        this.parentF(‘xxxx’)
      }
    }
  }
}
</script>

<template>//父组件
    <child :parentF="parentF"></child>
</template>
<script>
export default {
  methods: {
    parentF: function (str) {
      alert(str)
    }
  }
}
</script>