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

深碍√TFBOYSˉ_ 2022-04-02 10:56 242阅读 0赞

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

我发现了两种写法。

方法一：

子组件：

<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>

转自：[https://www.cnblogs.com/caik13/p/6896890.html][https_www.cnblogs.com_caik13_p_6896890.html]

[Link 1]: https://www.captainai.net/jiangyu1013/
[https_www.cnblogs.com_caik13_p_6896890.html]: https://www.cnblogs.com/caik13/p/6896890.html