vue 子组件调用、触发父组件中的方法-蒲公英云

vue 子组件调用、触发父组件中的方法

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到教程。

我发现了两种写法。

方法一：

子组件：

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

父组件：

<template>
    <editor id="editor" class="editor" @ee="cc"></editor>
</template>
<script>
export default {
  methods: {
    cc: function (str) {
      alert(str)
    }
  }
}
</script>

方法二：

子组件：

<template>
    <button @click="submit">提交</button>
</template>
<script>
export default {
  props: {
    onsubmit: {
      type: Function,
      default: null
    }
  },
  methods: {
    submit: function () {
      if (this.onsubmit) {
        this.onsubmit(‘cc12345’)
      }
    }
  }
}
</script>

父组件：

<template>
    <editor id="editor" class="editor" :onsubmit="cc"></editor>
</template>
<script>
export default {
  methods: {
    cc: function (str) {
      alert(str)
    }
  }
}
</script>