vue组件之间进行传值的方法
作者:KinHKin 发布时间:2024-04-27 15:48:04
标签: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数据状态管理器等等
来源:https://blog.csdn.net/weixin_42974827/article/details/126651267


猜你喜欢
- sql语句查询重复的数据查找所有重复标题的记录:SELECT *FROM t_info aWHERE ((SELECT COUNT(*)FR
- 前言入门爬虫很容易,几行代码就可以,可以说是学习 Python 最简单的途径。刚开始动手写爬虫,你只需要关注最核心的部分,也就是先成功抓到数
- 应用场景这段代码可以用于修改Excel文件的元数据,例如作者、主题、描述等,通过使用Python和Openpyxl模块,以及wxPython
- python时间处理月份加减第三方模块 :python-dateutil安装方式:pip install python-dateutil实例
- 当数组/矩阵过大则只会显示其中一部分,中间则会自动用省略号代替:直接在import numpy 加上下面一句代码即可解决:import nu
- 一、匹配目标文件中所有以https?://开头,以.jpg|.png|.jpeg结尾的字符串二、尝试过程1) &n
- function createobj() { if (window.ActiveXObject)&n
- 网页颜色变黑白代码国务院决定,为表达全国各族人民对青海玉树地震遇难同胞的深切哀悼,2010年4月21日举行全国哀悼活动,全国和驻外使领馆下半
- 本文实例讲述了Django中使用group_by的方法。分享给大家供大家参考。具体分析如下:在Django中怎样使用group_by语句呢?
- 一、语法:cap = cv2.VideoCapture(0)说明:参数0表示默认为笔记本的内置第一个摄像头,如果需要读取已有的视频则参数改为
- 技术背景在前面一篇博客中我们介绍过关于python的表格数据处理方案,这其中的工作重点就是对表格类型的数据进行梳理、计算和展示,本文重点介绍
- 1. 引言山脊图一般由垂直堆叠的折线图组成,这些折线图中的折线区域间彼此重叠,此外它们还共享相同的x轴.山脊图经常以一种相对不常见且非常适合
- 我们越来越多的使用pandas进行数据处理,有时需要向一个已经存在的csv文件写入数据,传统的方法之前我也有些过,向txt,excel文件写
- 本文实例为大家分享了js实现自由落体效果的具体代码,供大家参考,具体内容如下1.效果图2.实现分析利用Canvas画圆球、地面;1.下落过程
- 本文实例讲述了Python反射和内置方法重写操作。分享给大家供大家参考,具体如下:isinstance和issubclassisinstan
- 前面文章分别简单介绍了线性回归,逻辑回归,贝叶斯分类,并且用python简单实现。这篇文章介绍更简单的 knn, k-近邻算法(kNN,k-
- 1.什么是property简单地说就是一个类里面的方法一旦被@property装饰,就可以像调用属性一样地去调用这个方法,它能够简化调用者获
- 配置Laravel 的邮件服务可以通过 config/mail.php 配置文件进行配置。邮件中的每一项都在配置文件中有单独的配置项,甚至是
- 一、什么是字典?字典是Python语言中唯一的映射类型。映射类型对象里哈希值(键,key)和指向的对象(值,value)是一对多的的关系,通
- 想用C++写项目,数据库是必须的,所以这两天学了一下C++操作MySQL数据库的方法。也没有什么教程,就是在网上搜的知识,下面汇总一下。 连