Vue 中如何将函数作为 props 传递给组件的实现代码


Posted in Javascript onMay 12, 2020

本文 GitHub https://github.com/qq44924588 ... 上已经收录,更多往期高赞文章的分类,也整理了很多我的文档,和教程资料。欢迎Star和完善,大家面试可以参照考点复习,希望我们一起有点东西。

Vue 新手经常问的一个常见问题。可以将字符串、数组、数字和对象作为props传递。但是你能把一个函数当作一个props来传递吗?

虽然可以将函数作为props传递,但这种方式不好。相反,Vue 有一个专门为解决这问题而设计的功能,接下来,我们来看看。

向组件传入函数

获取一个函数或方法并将其作为一个prop传递给子组件相对比较简单。实际上,它与传递任何其他变量方式完全相同:

<template>
 <ChildComponent :function="myFunction" />
</template>

export default {
 methods: {
 myFunction() {
  // ...
 }
 }
};

正如前面所说,在Vue中永远都不要做这样的事情。

为什么?Vue有更好的东西。

大家都说简历没项目写,我就帮大家找了一个项目,还附赠【搭建教程】。

React vs Vue

如果使用过 React,就会习惯传递函数方式。

在React中,我们可以将一个函数从父组件传递给子组件,以便子组件能够向上与父组件通信。props 和 data 向下流动,函数调用向上流动。

然而,Vue有一种不同的机制来实现子到父通信方式,Vue 使用事件。

这与 DOM 的工作方式相同-与React相比,Vue 的方式与浏览器的一致性更高。 元素可以发出事件,并且可以监听这些事件。

因此,尽管在Vue中可以把函数作为prop传递,但它被认为是一种反模式。

使用事件

事件是我们与 Vue 中的父组件通信的方式。

这里有一个简短的例子来说明事件是如何工作的。

首先,我们将创建子组件,该子组件在创建时会发出一个事件:

// ChildComponent
export default {
 created() {
 this.$emit('created');
 }
}

在父组件中,我们监听该事件:

<template>
 <ChildComponent @created="handleCreate" />
</template>

export default {
 methods: {
 handleCreate() {
  console.log('Child has been created.');
 }
 }
};

事件可以做的事情还有很多,而这仅仅是皮毛。强烈建议查看官方的Vue文档来了解更多关信息,绝对值得一读。

但是事件并不能完全解决我们所有的问题。

从子组件访问父组件的作用域里数据

在许多情况下,我们试图解决的问题是访问来自不同作用域的数据。

父组件有一个作用域,子组件有另一个作用域。

通常,我们希望从父组件访问子组件中的值,或者从子组件访问父组件中的值。Vue阻止我们直接这样做,这是一件好事。

它使我们的组件更加具有封装性,并提高了它们的可重用性。这使我们的代码更简洁,并从长远来看避免了许多令人头痛的问题。

但是有时候我们可能会试图通过函数来绕过这个问题。

从父类获取值

如果希望子组件访问父组件的方法,那么将方法直接作为 prop 传递似乎简单明了。

在父组件中我们会这样做:

<!-- Parent -->
<template>
 <ChildComponent :method="parentMethod" />
</template>

// Parent
export default {
 methods: {
 parentMethod() {
  // ...
 }
 }
}

在我们的子组件中,使用传入的方法:

这样做会有什么问题?

这并不是完全错误的,但是在这种情况下使用事件会更好。

然后,当需要时,子组件不会调用该函数,而只是发出一个事件。然后父组件将接收该事件,调用该函数,拼装将更新传递给子组件的 prop。

这是达到同样效果的更好的方法。

在其他情况下,我们可能想要从子元素中获取一个值到父元素中,我们为此使用了函数。

例如,你可能正在这样做。父函数接受子函数的值并对其进行处理:

<!-- Parent -->
<template>
 <ChildComponent :method="parentMethod" />
</template>
// Parent
export default {
 methods: {
 parentMethod(valueFromChild) {
  // Do something with the value
  console.log('From the child:', valueFromChild);
 }
 }
}

在子组件中调用传入的方法并将子组件的值作为方法的参数传入:

// Child
export default {
 props: {
 method: { type: Function },
 },
 data() {
 return { value: 'I am the child.' };
 },
 mounted() {
 // Pass a value to the parent through the function
 this.method(this.value);
 }
}

这也不是完全错误的,这样做是可行的。

只是这不是在Vue中的最佳方式。相反,事件更适合解决这个问题。我们可以使用事件来实现完全相同的事情

<!-- Parent -->
<template>
 <ChildComponent @send-message="handleSendMessage" />
</template>

// Parent
export default {
 methods: {
 handleSendMessage(event, value) {
  // Our event handler gets the event, as well as any
  // arguments the child passes to the event
  console.log('From the child:', value);
 }
 }
}

在子组件中,我们发出事件:

// Child
export default {
 props: {
 method: { type: Function },
 },
 data() {
 return { value: 'I am the child.' };
 },
 mounted() {
 // Instead of calling the method we emit an event
 this.$emit('send-message', this.value);
 }
}

事件在Vue中非常有用,但它们也不能100%地解决我们的问题。有时,我们需要以不同的方式从父级访问子级的作用域。

为此,我们使用作用域插槽!

使用作用域插槽

作用域插槽是一个更高级的主题,但是它们也非常有用。事实上,我认为它们是Vue提供的最强大的功能之一。

它们弱化了子作用域和父作用域之间的界限。但是它以一种非常干净的方式完成,使得我们的组件像以前一样可组合。

如果你想了解更多关于作用域插槽是如何工作的,可以先看看官方文档,或者我们下回讲解。

代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。

来源:https://stackoverflow.com/que...

总结

到此这篇关于Vue 中如何将函数作为 props 传递给组件的实现代码的文章就介绍到这了,更多相关vue props 传递给组件内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
效率高的Javscript字符串替换函数的benchmark
Aug 02 Javascript
jquery.hotkeys监听键盘按下事件keydown插件
May 11 Javascript
谷歌地图打不开的解决办法
Aug 07 Javascript
Ajax局部更新导致JS事件重复触发问题的解决方法
Oct 14 Javascript
简述Jquery与DOM对象
Jul 10 Javascript
angularJS深拷贝详解
Mar 23 Javascript
JS验证码实现代码
Sep 14 Javascript
JavaScript屏蔽Backspace键的实现代码
Nov 02 Javascript
JS同步、异步、延迟加载的方法
May 05 Javascript
js中Array对象的常用遍历方法详解
Jan 17 Javascript
浅谈JavaScript中this的指向问题
Jul 28 Javascript
vue中配置scss全局变量的步骤
Dec 28 Vue.js
详解ES6数组方法find()、findIndex()的总结
May 12 #Javascript
JQuery表单元素取值赋值方法总结
May 12 #jQuery
JavaScript或jQuery 获取option value值方法解析
May 12 #jQuery
Node.js API详解之 console模块用法详解
May 12 #Javascript
基于JS实现视频上传显示进度条
May 12 #Javascript
vue项目中使用bpmn-自定义platter的示例代码
May 11 #Javascript
Vue实现图片轮播组件思路及实例解析
May 11 #Javascript
You might like
推荐几部必看的DC动画电影
2020/03/03 欧美动漫
PHP 获取文件权限函数介绍
2013/07/11 PHP
PHP中feof()函数实例测试
2014/08/23 PHP
将函数的实际参数转换成数组的方法
2010/01/25 Javascript
Javascript在IE和FireFox中的不同表现简析
2012/12/03 Javascript
解析javascript系统错误:-1072896658的解决办法
2013/07/08 Javascript
jquery iframe操作详细解析
2013/11/20 Javascript
jquery实现平滑的二级下拉菜单效果
2015/08/26 Javascript
Bootstrap嵌入jqGrid,使你的table牛逼起来
2016/05/05 Javascript
前端js实现文件的断点续传 后端PHP文件接收
2016/10/14 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
2016/10/27 Javascript
js时间戳和c#时间戳互转方法(推荐)
2017/02/15 Javascript
js 去掉字符串前后空格实现代码集合
2017/03/25 Javascript
微信小程序实现预览图片功能
2020/10/22 Javascript
JavaScript前端页面搜索功能案例【基于jQuery】
2019/07/10 jQuery
Python MySQLdb模块连接操作mysql数据库实例
2015/04/08 Python
python使用socket向客户端发送数据的方法
2015/04/29 Python
日常整理python执行系统命令的常见方法(全)
2015/10/22 Python
基于Django模板中的数字自增(详解)
2017/09/05 Python
Python温度转换实例分析
2018/01/17 Python
PYTHON基础-时间日期处理小结
2018/05/05 Python
详解Python用三种方式统计词频的方法
2019/07/29 Python
Python中正反斜杠(‘/’和‘\’)的意义与用法
2019/08/12 Python
Python控制台输出时刷新当前行内容而不是输出新行的实现
2020/02/21 Python
纽约复古灵感的现代珠宝品牌:Lulu Frost
2018/03/03 全球购物
应届生英语教师求职信
2013/11/05 职场文书
高中生的自我鉴定范文
2014/01/24 职场文书
大学生个人求职口试自我评价
2014/02/16 职场文书
优秀求职信
2014/05/29 职场文书
幼儿园端午节活动方案
2014/08/25 职场文书
员工趣味活动方案
2014/08/27 职场文书
反四风对照检查材料
2014/09/22 职场文书
2016年“12.3”国际残疾人日活动总结
2016/04/01 职场文书
2019让人心动的商业计划书
2019/06/27 职场文书
Nginx部署vue项目和配置代理的问题解析
2021/08/04 Servers
Vue实现跑马灯样式文字横向滚动
2021/11/23 Vue.js