Vue 进阶组件实战应用 -- 父子组件传值的应用实例（子父组件传值的两种触发方式）
【摘要】
基础的子组件和父组件通信已经搞定了，可以看此博客 父子组件传值基础应用 需求 现在需求是在一个父页面引用子组件，不只是要实现基本的父子组件传值。并且子组件给父组件传值的触发条件要在父页面触发。
目前小编...
基础的子组件和父组件通信已经搞定了，可以看此博客 父子组件传值基础应用
需求
现在需求是在一个父页面引用子组件，不只是要实现基本的父子组件传值。并且子组件给父组件传值的触发条件要在父页面触发。
目前小编采用的方式是使用ref 属性+this.emit 方法 ，在父页面调用子页面的方法结合this.emit方法实现。在父页面调用子页面的方法并且把子页面里的值通过父页面的自定义事件传递到父页面。
注意：先新建子页面，然后进行父子传值，在父页面注册子页面为组件
父->子传值
父页面
<template>
<div class="hello">
<ChildComponents
:msg="msgc">
</ChildComponents>
<button @click="send()">向子组件传值</button>
</div>
</template>
<script>
import ChildComponents from'./ChildComponents.vue'
export default {
name: 'HelloWorld',
components: {
'ChildComponents':ChildComponents
},
data () {
return {
msgc:''
}
},
methods:{
send(){
this.msgc='来自HelloWorld父组件的值';
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
子页面
<template>
<div>
<div><h1>子组件的值</h1></div>
<div>
{{msg}}<br/>
</div>
</div>
</template>
<script>
export default {
name: 'test',
components: {},
props: {
msg: String
},
data () {
return {
}
}
}
</script>
<style scoped>
</style>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
结果：
子->父传值
子页面触发
父页面
<template>
<div class="hello">
<ChildComponents
@sendMsg="sendMsg"
:msg="msgc">
</ChildComponents>
<h1>父组件的值</h1><br/>
{{msgp}}
<button @click="send()">向子组件传值</button>
</div>
</template>
<script>
import ChildComponents from'./ChildComponents.vue'
export default {
name: 'HelloWorld',
components: {
'ChildComponents':ChildComponents
},
data () {
return {
msgc:'',
msgp:'',
}
},
methods:{
sendMsg(data) {
this.msgp=data;
},
send(){
this.msgc='来自HelloWorld父组件的值';
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
子页面
<template>
<div>
<div><h1>子组件的值</h1></div>
<div>
{{msg}}<br/>
<button @click="sendMsg()">向父组件传值</button>
</div>
</div>
</template>
<script>
export default {
name: 'test',
components: {},
props: {
msg: String
},
data () {
return {
}
},
methods: {
sendMsg() {
//子页面的值推送到父页面的自定义事件里
this.$emit('sendMsg',"来ChildComPonens自子组件的值")
}
}
}
</script>
<style scoped>
</style>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
结果：
父页面触发
父页面需要修改的地方
<ChildComponents
@sendMsg="sendMsg"
ref="chile"
:msg="msgc">
</ChildComponents>
<h1>父组件的值</h1><br/>
{{msgp}}
<button @click="sendParnt()">子组件向父组件传值，父组件触发</button>
//增加一个方法
methods:{
sendParnt() {
this.$refs.chile.sendmsgP()
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
子组件只需要增加一个方法 sendmsgP 父页面可以通过ref 调用
methods: {
sendMsg() {
this.$emit('sendMsg',"来ChildComPonens自子组件的值")
},
sendmsgP(){
this.sendMsg()
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
结果：
文章来源: kangshihang.blog.csdn.net，作者：康世行，版权归原作者所有，如需转载，请联系作者。
原文链接：kangshihang.blog.csdn.net/article/details/121040513
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）