VUE组件传值案例讲解
时间:2022-07-22
本文章向大家介绍VUE组件传值案例讲解,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
写在前面
好吧我承认我疏忽了,我一直以为我的博客是将vue的一些常见操作全部写完了的,但是直到我写组件的时候突然想起来看一下自己写的博客是不是有问题的才发现,组件之间的传值竟然一直没动过,好吧,我承认我自卑,我真的很怕黑,每当夜晚来临的时候我都很狼狈…咳咳,放错了,不好意思,我承认我忘了,我真的很劳累,每当粉丝问问题的时候我都慌的一批(以为哪里又又又又误人子弟了)…吓得我赶紧写个例子给你们,开整…
搞明白谁是“父”谁是“子”
没写之前呢先搞明白一个问题,组件引用的时候到底谁是老子,谁是儿子,被打的是儿子,打人的老子,记住这个就可以了,被引入的是儿子,引入他的是老子,也就是说我们一般写公共组件的时候都是在写子组件,父组件是调用这些子组件的。
用dialog进行举例子[实现一个子组件]
写个dialog组件:
<template>
<div>
<el-dialog :title="title" :visible.sync="openCurrDialog" :width="options.width" :before-close="_closeCurrDialog">
<span>{{msg}}</span>
</el-dialog>
</div>
</template>
<script>
export default {
props: {
title: {
type: String,
default: () => "标题"
},
openCurrDialog: {
type: Boolean,
default: false
},
options: {
type: Object,
default: () => {
return {
width: "50%"
}
}
},
msg: {
type: String,
default: () => "这是一段引入的文字"
}
},
data() {
return {
}
},
methods: {
_closeCurrDialog() {
this.$emit("_closeIt", "关闭了")
}
}
}
</script>
<style>
</style>
这个时候我们只需要看谁需要用到它
父组件引入子组件
<template>
<div>
<el-card style="margin: 10px;">
<el-button @click="statusDialog = true">
打开dialog
</el-button>
<commonDialog :msg="msg" :title="title" :options="currOptions" :openCurrDialog="statusDialog" @_closeIt="_closeCurrDialog"></commonDialog>
</el-card>
</div>
</template>
<script>
import commonDialog from "../commonComponents/commonDialog.vue"
export default {
components: {
commonDialog,
},
data() {
return {
msg:"我是来自父亲的关爱",
statusDialog: false, //当前的dialog是不是显示
title: '引用的dialog', //当前的dialog的标题
currOptions: {
width: "30%"
}
}
},
methods: {
/**
* @param {Object} val
* @function _closeCurrDialog 关闭当前dialog
*/
_closeCurrDialog(val) {
//这里需要注意的是 val是跟随函数直接过来的,所以不需要进行传值的操作,只需要在组件中设置好需要的参数即可!
console.info(val)
this.statusDialog = false
},
}
}
</script>
<style>
</style>
效果
简单的讲解和注意点
- 作用:我们做组件有几个好处,第一个是简化代码,提高代码的复用性,同样的功能尽量将共同点抽离出来,不同点定义出来,这样有类似功能的时候可以直接拿过去用,第二是数据之间的传递更加的方便。
- 传值:子组件给父组件的数据使用的emit将数据封装到函数里面进行传递:
- :before-close="_closeCurrDialog" //绑定一个函数
/**
* @function _closeCurrDialog 给父组件的数据
* @prod 这里定义的函数名字是子组件使用的函数名字,这里说明一点,如果你给父组件的值是一个变量也可以直接传递
*/
_closeCurrDialog() {
this.$emit("_closeIt", "关闭了")
}
父组件接收子组件的值
- @_closeIt="_closeCurrDialog" //_closeIt就是在子组件里面定义的函数名字,这里不需要定义形参数
/**
* @param {Object} val
* @function _closeCurrDialog 关闭当前dialog
* @prod 接收到了子组件的值以后呢,不管是不是有值,我们都不需要重新定义值来接收它,直接在含里面写一个形参就可以了
*/
_closeCurrDialog(val) {
//这里需要注意的是 val是跟随函数直接过来的,所以不需要进行传值的操作,只需要在组件中设置好需要的参数即可!
console.info(val)
this.statusDialog = false
},
子组件接收父组件的值
- 导入需要的子组件路径
import commonDialog from "../commonComponents/commonDialog.vue"
- 引入组件
components: {
commonDialog //这里可以直接起一个别名 形式是:“别名” : commonDialog
},
- 参数传递
<commonDialog :msg="msg" :title="title" :options="currOptions" :openCurrDialog="statusDialog" @_closeIt="_closeCurrDialog"></commonDialog>
里面的所有的:绑定的值都是子组件里面props定义的,我们看子组件里props
props: {
title: {
type: String,
default: () => "标题"
},
openCurrDialog: {
type: Boolean,
default: false
},
options: {
type: Object,
default: () => {
return {
width: "50%"
}
}
},
msg: {
type: String,
default: () => "这是一段引入的文字"
}
},
props就当作是传递的一个桥梁就可以,这里需要注意的一个点是在props里面定义的值不要在data里面定义了,不然会报错,假设我定义了会如下的错误:
翻译成中华方言就是:数据属性“msg”已声明为属性。改为使用属性默认值。 细品 那么你想要给子组件的值就正常在父组件的data里面使用就可以了。这样你在父组件里面的操作的数据就可以传递给到子组件了!
总结
首先不可否认的是数据驱动和组件化是vue相当牛叉的两个地方,所以这个要不要学会你们自己品,重要性就不要我说了,这篇文章我会跟进,这篇文章写的是最基础的用法,还有很多的高级用法,回头再更新一篇,我发现我写的越基础的东西看的人越多,额,可能是大家都比较注意基础吧,以后我也尽量写一些关于组件使用的文章,感谢阅读!
- Oracle Data Guard延迟的原因(r11笔记第69天)
- 一个细小的空间问题触发的报警(r11笔记第68天)
- MySQL误操作数据恢复的简单实践(r11笔记第67天)
- Oracle 12c中JOB运行失败的简单处理(r11笔记第66天)
- MySQL中的半同步复制(r11笔记第65天)
- Linux系统LVM逻辑卷创建过程以及自动化脚本
- 一个闪回区报警的数据恢复(r11笔记第62天)
- 利用腾讯云COS云对象存储定时远程备份网站
- 分享一个自写的Python远程命令和文件(夹)传输类
- Oracle数据误操作全面恢复实战(r11笔记第78天)
- 远程协助解决异常宕库的问题(r11笔记第75天)
- Nginx-helper纯代码版,文章评论发布自动清理Fastcgi缓存
- MySQL和Oracle行值表达式对比(r11笔记第74天)
- 闪回数据库不是“万金油”(r11笔记第73天)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 从源码看 Jetpack(6)-ViewModel源码详解
- linux配置c++11编译环境
- Java 多线程编程(聊聊线程池)
- Java 多线程编程(“锁”事碎碎念)
- Spring Cloud Alibaba技术栈(下)
- Electron安装过程深入解析(读完此文解决Electron安装失败导致的无法启动,无法打包的问题)
- Kafka中副本机制的设计和原理
- Cocoapods更新出错
- 用 Wolfram 语言映射美国的山火
- Mathematica在中学数学教与学中的应用
- 总结一些ES不常用的filter
- 如何将炫酷的报表直接截图发送邮件——在Superset 0.37使用Schedule Email功能
- Kettle构建Hadoop ETL实践(五):数据抽取
- Kafka监控必备——Kafka-Eagle 2.0.2正式发布
- iOS Universal link 入门指南