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相当牛叉的两个地方,所以这个要不要学会你们自己品,重要性就不要我说了,这篇文章我会跟进,这篇文章写的是最基础的用法,还有很多的高级用法,回头再更新一篇,我发现我写的越基础的东西看的人越多,额,可能是大家都比较注意基础吧,以后我也尽量写一些关于组件使用的文章,感谢阅读!
- JSON 数据使用方法
- Eureka Server之间的注册表信息同步
- .NET Core 观察者模式 以及 delegate 和 event
- webapp设置适应pc和手机的页面宽高以及布局层叠图片文字
- 比较Spring AOP与AspectJ
- Promise原理解析与实现
- Spring Cloud 覆写远端的配置属性
- C语言心得一
- .NET Core装饰模式和.NET Core的Stream
- Nginx反向代理,负载均衡,redis session共享,keepalived高可用
- 多行图片hover加边框兼容IE7+
- Debian JDK安装及配置
- Python With-As
- 用 TensorFlow 创建自己的 Speech Recognizer
- 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 数组属性和方法
- Numpy根据Bool值挑选数组中元素
- MySQL获取每个分类下面的前三条数据
- windows宿主机如何SSH连接VMware的Linux虚拟机
- np.random.rand均匀分布随机数和np.random.randn正态分布随机数函数使用方法
- Java FileReader使用相对路径读取文件
- MySQL批量插入数据库实现语句性能分析
- np.repeat用法
- MySQL优化INSERT的性能
- PHP在函数体中传递与接收参数
- 使用Arraylist将数组中元素随机均等乱序分为N个子数组
- PHP中abstract 和 interface的区别
- PHP5中的魔术方法
- 一起来学演化计算-matlab基本函数randn,rand, orth
- PHP关键字this指向当前对象指针
- 一起来学matlab-matlab学习笔记8 基本绘图命令_4 LineSpec线条设定