VUE组件传值案例讲解

何处锦绣不灰堆 2020-11-13 12:56:03
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相当牛叉的两个地方,所以这个要不要学会你们自己品,重要性就不要我说了,这篇文章我会跟进,这篇文章写的是最基础的用法,还有很多的高级用法,回头再更新一篇,我发现我写的越基础的东西看的人越多,额,可能是大家都比较注意基础吧,以后我也尽量写一些关于组件使用的文章,感谢阅读!

版权声明
本文为[何处锦绣不灰堆]所创,转载请带上原文链接,感谢
https://clearlove.blog.csdn.net/article/details/107627050

  1. [front end -- JavaScript] knowledge point (IV) -- memory leakage in the project (I)
  2. This mechanism in JS
  3. Vue 3.0 source code learning 1 --- rendering process of components
  4. Learning the realization of canvas and simple drawing
  5. gin里获取http请求过来的参数
  6. vue3的新特性
  7. Get the parameters from HTTP request in gin
  8. New features of vue3
  9. vue-cli 引入腾讯地图(最新 api,rocketmq原理面试
  10. Vue 学习笔记(3,免费Java高级工程师学习资源
  11. Vue 学习笔记(2,Java编程视频教程
  12. Vue cli introduces Tencent maps (the latest API, rocketmq)
  13. Vue learning notes (3, free Java senior engineer learning resources)
  14. Vue learning notes (2, Java programming video tutorial)
  15. 【Vue】—props属性
  16. 【Vue】—创建组件
  17. [Vue] - props attribute
  18. [Vue] - create component
  19. 浅谈vue响应式原理及发布订阅模式和观察者模式
  20. On Vue responsive principle, publish subscribe mode and observer mode
  21. 浅谈vue响应式原理及发布订阅模式和观察者模式
  22. On Vue responsive principle, publish subscribe mode and observer mode
  23. Xiaobai can understand it. It only takes 4 steps to solve the problem of Vue keep alive cache component
  24. Publish, subscribe and observer of design patterns
  25. Summary of common content added in ES6 + (II)
  26. No.8 Vue element admin learning (III) vuex learning and login method analysis
  27. Write a mini webpack project construction tool
  28. Shopping cart (front-end static page preparation)
  29. Introduction to the fluent platform
  30. Webpack5 cache
  31. The difference between drop-down box select option and datalist
  32. CSS review (III)
  33. Node.js学习笔记【七】
  34. Node.js learning notes [VII]
  35. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  36. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  37. 【JQuery框架,Java编程教程视频下载
  38. [jQuery framework, Java programming tutorial video download
  39. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  40. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  41. 【Vue,阿里P8大佬亲自教你
  42. 【Vue基础知识总结 5,字节跳动算法工程师面试经验
  43. [Vue, Ali P8 teaches you personally
  44. [Vue basic knowledge summary 5. Interview experience of byte beating Algorithm Engineer
  45. 【问题记录】- 谷歌浏览器 Html生成PDF
  46. [problem record] - PDF generated by Google browser HTML
  47. 【问题记录】- 谷歌浏览器 Html生成PDF
  48. [problem record] - PDF generated by Google browser HTML
  49. 【JavaScript】查漏补缺 —数组中reduce()方法
  50. [JavaScript] leak checking and defect filling - reduce() method in array
  51. 【重识 HTML (3),350道Java面试真题分享
  52. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  53. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  54. [re recognize HTML (3) and share 350 real Java interview questions
  55. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  56. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  57. 【重识 HTML ,nginx面试题阿里
  58. 【重识 HTML (4),ELK原来这么简单
  59. [re recognize HTML, nginx interview questions]
  60. [re recognize HTML (4). Elk is so simple