黑马程序员技术交流社区
标题:
【上海校区】vue中子组件触发父组件的方法
[打印本页]
作者:
梦缠绕的时候
时间:
2018-10-23 09:04
标题:
【上海校区】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>
---------------------
作者:前端的搬运工
来源:CSDN
原文:
https://blog.csdn.net/github_39088222/article/details/80269115
版权声明:本文为博主原创文章,转载请附上博文链接!
作者:
不二晨
时间:
2018-10-25 10:50
作者:
魔都黑马少年梦
时间:
2018-11-1 16:59
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)
黑马程序员IT技术论坛 X3.2