黑马程序员技术交流社区

标题: 【上海校区】vue中子组件触发父组件的方法 [打印本页]

---

作者: 不二晨    时间: 2018-12-21 10:14
标题: 【上海校区】vue中子组件触发父组件的方法
方法一：

子组件：

`<template>
        <button @click="submit">提交</button>
    </template>
    <script>
    export default {
      methods: {
        submit: function () {
          // 子组件中触发父组件方法ee并传值cc12345
          this.$emit('ee', 'cc12345')
        }
      }
    }
    </script>`
1
2
3
4
5
6
7
8
9
10
11
12
13
父组件：

<template>
    <editor id="editor" class="editor" @ee="cc"></editor>
</template>
<script>
export default {
  methods: {
    cc: function (str) {
      alert(str)
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
方法二：

子组件：

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
父组件：

<template>
    <editor id="editor" class="editor" :onsubmit="cc"></editor>
</template>
<script>
export default {
  methods: {
    cc: function (str) {
      alert(str)
    }
  }
}
</script>
---------------------
【转载】仅作分享，侵删
作者：前端的搬运工
原文：https://blog.csdn.net/github_39088222/article/details/80269115

---

作者: 不二晨    时间: 2018-12-26 10:15

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2