通过实例讲解vue组件之间的传值
更新时间：2022年09月15日 10:13:32 作者：KinHKin(五年前端)
通过Vuex共享数据,官方给出的跨多组件传递数据的解决方案,下面这篇文章主要给大家介绍了关于vue组件之间传值的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
前言
目前在做vue的项目，用到了子组件依赖其父组件的数据，进行子组件的相关请求和页面数据展示，父组件渲染需要子组件通知更新父组件的state，父子组件之间的传值一般有三种方法：
- 父传子
- 子传父
- 非父子传值
注意：
父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息。
接下来，我们会通过实例代码来看的更清晰，理解更容易：
1.父组件向子组件进行传值
父组件代码：
<template>
<div>
父组件：
<el-input v-model="val" style="width:300px" />
<child :value="val" />
</div>
</template>
<script>
import child from './child.vue'
export default {
name: 'Parent',
data() {
return {
val: '我是父组件'
}
},
components: {
child
},
}
</script>子组件代码：
<template>
<div class="child">
子组件： {{ value }}
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
}
},
props: ['value']
}
</script>
<style scoped>
.child {
margin-top: 20px;
}
</style>
2.子组件向父组件进行传值
父组件代码
<template>
<div>
父组件：
<el-input v-model="val" style="width:300px" />
<child :value="val" @bindMsg='msgFun' />
</div>
</template>
<script>
import child from './child.vue'
export default {
name: 'Parent',
data() {
return {
val: '我是父组件'
}
},
components: {
child
},
methods: {
msgFun(childVal) {
console.log(childVal,'childVal')
this.val = childVal
}
}
}
</script>子组件代码
<template>
<div class="child">
子组件： {{ value }}
<el-button @click="$emit('bindMsg', '我是子组件')">点击改变父组建数据</el-button>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
}
},
props: ['value'],
}
</script>
<style scoped>
.child {
margin-top: 20px;
}
</style>
3.非父子组件之间的传值
.sync可以帮我们实现父组件向子组件传递的数据的双向绑定，所以子组件接收到数据后可以直接修改，并且会同时修改父组件的数据
ref绑定在子组件上，引用的指向就是子组件的实例，父组件可以通过 ref 主动获取子组件的属性或者调用子组件的方法
父组件代码
<template>
<div>
父组件：
<el-input v-model="val" style="width:300px" />
<el-button @click="childRefClick">父组件ref点击</el-button>
<child :value="val" @bindMsg='msgFun' :data.sync='data' ref='child' />
</div>
</template>
<script>
import child from './child.vue'
export default {
name: 'Parent',
data() {
return {
val: '我是父组件',
data: ''
}
},
components: {
child
},
methods: {
msgFun(childVal) {
console.log(childVal, 'childVal')
this.val = childVal;
},
childRefClick() {
//ref获取子组件实例的属性和方法
const child = this.$refs.child
console.log(child.name)
child.childBtnClick("调用了子组件的方法")
}
}
}
</script>子组件代码
<template>
<div class="child">
子组件： {{ value }}
<el-button @click="childBtnClick">点击改变父组建数据</el-button>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
currenData: {}
}
},
props: ['value', 'data'],
methods: {
childBtnClick(val) {
console.log(val,'val')
this.$emit('bindMsg', val || '我是子组件')
},
},
}
</script>
<style scoped>
.child {
margin-top: 20px;
}
</style>
非父子组件之间的传值方式还有slot插槽，vuex数据状态管理器等等
总结
主要用到了父子组件的传值，props，$emit，ref，sync等方法，父子组件之间的传值，十分常见，只要我们用会了组件之间的传数据的方法，对于前端的组件抽离，性能提升都有很大的好处。
到此这篇关于vue组件之间的传值的文章就介绍到这了,更多相关vue组件间传值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Vue与后台Api进行交互通常是利用vue-resource来实现的，本质上vue-resource是通过http来完成AJAX请求相应的。这篇文章主要介绍了Vue中的vue-resource示例详解,需要的朋友可以参考下2018-11-11
vue3为什么要用proxy替代defineProperty
这篇文章主要介绍了vue3为什么要用proxy替代defineProperty,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-10-10
在本篇文章里小编给大家整理的是一篇关于Vue3.0的优化总结内容，有需要的朋友们可以学习下。2020-10-10
最近工作中遇到了一个需求,需要利用echarts在地图上面标记点位,所下面这篇文章主要给大家介绍了关于如何利用Echarts根据经纬度给地图画点画线的相关资料,需要的朋友可以参考下2022-05-05
关于vue-admin-template模板连接后端改造登录功能
这篇文章主要介绍了关于vue-admin-template模板连接后端改造登录功能,登陆方法根据账号密码查出用户信息，根据用户id与name生成token并返回，userinfo则是对token进行获取，在查出对应值进行返回，感兴趣的朋友一起看看吧2022-05-05
本篇文章主要介绍了详解VUE的状态控制与延时刷新，实例分析了数据延时到展示的时候再去刷新的技巧，有兴趣的可以了解一下。2017-03-03
这篇文章主要介绍了vue路由传参接收以及传参对象为对象时的问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了VUE表达式{{}}中如何拼接字符问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
vue插件--仿微信小程序showModel实现模态提示窗功能
这篇文章主要介绍了vue插件--仿微信小程序showModel实现模态提示窗,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-08-08
这篇文章主要介绍了一起写一个即插即用的Vue Loading插件实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
最新评论