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 相关文章推荐
jquery批量设置属性readonly和disabled的方法
Jan 24 Javascript
jquery实现的网页自动播放声音
Apr 30 Javascript
jscript读写二进制文件的方法
Apr 22 Javascript
JS+CSS实现的简单折叠展开多级菜单效果
Sep 12 Javascript
js css+html实现简单的日历
Jul 14 Javascript
Bootstrap3 图片(响应式图片&amp;图片形状)
Jan 04 Javascript
详解Vue + Vuex 如何使用 vm.$nextTick
Nov 20 Javascript
swiper自定义分页器使用方法详解
Sep 14 Javascript
详解webpack模块加载器兼打包工具
Sep 11 Javascript
Layer UI表格列日期格式化及取消自动填充日期的实现方法
May 10 Javascript
小程序点餐界面添加购物车左右摆动动画
Sep 23 Javascript
微信小游戏中three.js离屏画布的示例代码
Oct 12 Javascript
详解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
php实例分享之通过递归实现删除目录下的所有文件详解
2014/05/15 PHP
php自动识别文件编码并转换为UTF-8的方法
2014/06/12 PHP
10个php函数实用却不常见
2015/10/13 PHP
php获得文件夹下所有文件的递归算法的简单实例
2016/11/01 PHP
LNMP部署laravel以及xhprof安装使用教程
2017/09/14 PHP
php 的多进程操作实践案例分析
2020/02/28 PHP
jQuery中;function($,undefined) 前面的分号的用处
2014/12/17 Javascript
js实现照片墙功能实例
2015/02/05 Javascript
jQuery实现图像旋转动画效果
2016/05/29 Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
2016/11/20 Javascript
nodejs连接mysql数据库及基本知识点详解
2018/03/20 NodeJs
在 vue-cli v3.0 中使用 SCSS/SASS的方法
2018/06/14 Javascript
解决layui 复选框等内置控件不显示的问题
2018/08/14 Javascript
vue点击input弹出带搜索键盘并监听该元素的方法
2018/08/25 Javascript
element中table高度自适应的实现
2020/10/21 Javascript
Python函数式编程指南(一):函数式编程概述
2015/06/24 Python
Django框架中方法的访问和查找
2015/07/15 Python
Python装饰器入门学习教程(九步学习)
2016/01/28 Python
Python和Perl绘制中国北京跑步地图的方法
2016/03/03 Python
浅析Python中的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
Python中动态检测编码chardet的使用教程
2017/07/06 Python
python读取Excel实例详解
2018/08/17 Python
Python 处理图片像素点的实例
2019/01/08 Python
对Python定时任务的启动和停止方法详解
2019/02/19 Python
关于Python turtle库使用时坐标的确定方法
2020/03/19 Python
Django Admin设置应用程序及模型顺序方法详解
2020/04/01 Python
pytorch使用horovod多gpu训练的实现
2020/09/09 Python
html5 postMessage解决跨域、跨窗口消息传递方案
2016/12/20 HTML / CSS
美国领先的男士和女士内衣购物网站:Freshpair
2019/02/25 全球购物
应届生文秘专业个人自荐信格式
2013/09/21 职场文书
20年同学聚会感言
2014/02/03 职场文书
个人贷款承诺书
2014/03/28 职场文书
仓库文员岗位职责
2014/04/06 职场文书
财务经理岗位职责范本
2015/04/08 职场文书
个人售房合同协议书
2016/03/21 职场文书
2016年小学“我们的节日·中秋节”活动总结
2016/04/05 职场文书