快活林资源网

vue父子组件通信的高级用法示例
网络编程 2024/12/27 佚名
3 1
快活林资源网 Design By www.csstdc.com

前言

vue项目的一大亮点就是组件化。使用组件可以极大地提高项目中代码的复用率，减少代码量。但是使用组件最大的难点就是父子组件之间的通信。

子通信父

父组件

<template>
<div class="parent">
我是父组件
<!--父组件监听子组件触发的say方法，调用自己的parentSay方法-->
<!--通过:msg将父组件的数据传递给子组件-->
<children :msg="msg" @say="parentSay"></children>
</div>
</template>

<script>
import Children from './children.vue'
export default {
data () {
return {
msg: 'hello, children'
}
},
methods: {
// 参数就是子组件传递出来的数据
parentSay(msg){
console.log(msg) // hello, parent
}
},

// 引入子组件
components:{
children: Children
}
}
</script>

子组件

<template>
<div class="hello">
<div class="children" @click="say">
我是子组件
<div>
父组件对我说：{{msg}}
</div>
</div>

</div>
</template>

<script>

export default {
//父组件通过props属性传递进来的数据
props: {
msg: {
type: String,
default: () => {
return ''
}
}
},
data () {
return {
childrenSay: 'hello, parent'
}
},

methods: {
// 子组件通过emit方法触发父组件中定义好的函数，从而将子组件中的数据传递给父组件
say(){
this.$emit('say' , this.childrenSay);
}
}
}
</script>

子组件使用$emit方法调用父组件的方法，达到子通信父的目的。

父通信子

父组件

<!--Html-->
<template>
<!--父组件触发click方法-->
<div class="parent" @click="say">
我是父组件
<!--通过ref标记子组件-->
<children ref="child"></children>
</div>
</template>

<script>
import Children from './children.vue'
export default {
data () {
return {
msg: "hello,my son"
}
},
methods: {
// 通过$refs调用子组件的parentSay方法
say(){
this.$refs.child.parentSay(this.msg);
}
},

// 引入子组件
components:{
children: Children
}
}
</script>

子组件

<template>
<div class="hello">
<div class="children" >
我是子组件
<div>
父组件对我说：{{msg}}
</div>
</div>

</div>
</template>

<script>

export default {
data () {
return {
msg: ''
}
},

methods: {
// 父组件调用的JavaScript方法parentSay
parentSay(msg){
this.msg = msg;
}
}
}
</script>

父组件通过 $refs 调用子组件的方法。

以上就是父子组件通信的方式，父子组件传递数据直接用props，或者使用 $emit 和 $refs 依靠事件来传递数据。

父子组件通信提升篇

上文中，子通信父是在 子中触发点击事件 然后调用父组件的方法，父通信子是在 父中触发点击事件 调用子组件的方法。但是实际情况中可能存在 子通信父时子组件不允许有点击事件 而事件在父中或者 父通信子时点击事件在子组件 中。

子通信父时击事件在父组件

这种情况其实很常见，例如提交一个表单时表单的内容为子组件，而保存按钮在父组件上。此时点击保存按钮想要获取子组件表单的值。这种情况下已经不单单是子通信父和父通信子了，需要将两者结合在一起使用才能完成整个通信过程。

实现的思路是在父组件中点击事件时，先通过父子通信调用子组件的方法，然后在子组件中的该方法里使用子父通信调用父组件的另一个方法并将信息传递回来。以下是代码演示：

父组件

<template>
<div class="parent" @click="getData">
我是父组件
<!--父组件监听子组件触发的transData方法，调用自己的transData方法-->
<!--通过ref标记子组件-->
<children ref="child" @transData="transData"></children>
</div>
</template>

<script>
import Children from './children.vue'
export default {
data () {
return {
msg: 'hello, children'
}
},
methods: {
getData(){
// 调用子组件的getData方法
this.$refs.child.getData();
},
// 参数就是子组件传递出来的数据
transData(msg){
console.log(msg) // hello, parent
}
},

// 引入子组件
components:{
children: Children
}
}
</script>

子组件

<template>
<div class="hello">
<div class="children" >
我是子组件
<div>
子组件的数据：{{childrenSay}}
</div>
</div>

</div>
</template>

<script>

export default {
data () {
return {
childrenSay: 'hello, parent'
}
},
methods: {
// 子组件通过emit方法触发父组件中定义好的函数，从而将子组件中的数据传递给父组件
getData() {
this.$emit('transData' , this.childrenSay);
}
}
}
</script>

另一种情况思路也和这个一样，基础就在与父通信子和子通信父的灵活运用。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对的支持。

快活林资源网 Design By www.csstdc.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
快活林资源网 Design By www.csstdc.com
www.csstdc.com 快活林资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
快活林资源网 Design By www.csstdc.com