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 相关文章推荐
纯js实现的论坛常用的运行代码的效果
Jul 15 Javascript
jquery photoFrame 图片边框美化显示插件
Jun 28 Javascript
JS实现侧悬浮浮动实例代码
Nov 29 Javascript
JS实现div居中示例
Apr 17 Javascript
jquery插件bootstrapValidator数据验证详解
Nov 09 Javascript
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
详细分析JS函数去抖和节流
Dec 05 Javascript
React Native基础入门之调试React Native应用的一小步
Jul 02 Javascript
js中的深浅拷贝问题简析
May 10 Javascript
微信小程序tabBar 返回tabBar不刷新页面
Jul 25 Javascript
环形加载进度条封装(Vue插件版和原生js版)
Dec 04 Javascript
用jQuery实现抽奖程序
Apr 12 jQuery
详解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
在PWS上安装PHP4.0正式版
2006/10/09 PHP
探讨如何在PHP开启gzip页面压缩实例
2013/06/09 PHP
PHP swfupload图片上传的实例代码
2013/09/30 PHP
利用PHP自动生成印有用户信息的名片
2016/08/01 PHP
PHP读取目录树的实现方法分析
2019/03/22 PHP
JavaScript Event学习第七章 事件属性
2010/02/07 Javascript
五段实用的js高级技巧
2011/12/20 Javascript
Javascript的各种节点操作实例演示代码
2012/06/27 Javascript
js控制不同的时间段显示不同的css样式的实例代码
2013/11/04 Javascript
兼容主流浏览器的JS复制内容到剪贴板
2014/12/12 Javascript
jQuery Raty 一款不错的星级评分插件
2016/08/24 Javascript
javascript 四十条常用技巧大全
2016/09/09 Javascript
jQuery EasyUI 获取tabs的实例解析
2016/12/06 Javascript
jQuery使用JSONP实现跨域获取数据的三种方法详解
2017/05/04 jQuery
Bootstrap Table使用整理(一)
2017/06/09 Javascript
JavaScript判断变量名是否存在数组中的实例
2017/12/28 Javascript
vue实现添加与删除图书功能
2018/10/07 Javascript
vue实现点击隐藏与显示实例分享
2019/02/13 Javascript
vue实现todolist功能、todolist组件拆分及todolist的删除功能
2019/04/11 Javascript
12个提高JavaScript技能的概念(小结)
2019/05/09 Javascript
javascript面向对象三大特征之继承实例详解
2019/07/24 Javascript
微信小程序实现签字功能
2019/12/23 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
2020/07/31 Javascript
[01:04:01]2014 DOTA2华西杯精英邀请赛5 24 DK VS VG
2014/05/25 DOTA
Python开发实例分享bt种子爬虫程序和种子解析
2014/05/21 Python
python3+dlib实现人脸识别和情绪分析
2018/04/21 Python
如何基于python实现画不同品种的樱花树
2020/01/03 Python
美国殿堂级滑板、冲浪、滑雪服装品牌:Volcom(钻石)
2017/04/20 全球购物
英国屋顶用品和材料超市:Roofing Supplies UK
2019/08/24 全球购物
金融系应届毕业生求职信
2014/05/26 职场文书
2014年转正工作总结
2014/11/08 职场文书
公司仓管员岗位职责
2015/04/01 职场文书
致青春观后感
2015/06/09 职场文书
2016年优秀团支部事迹材料
2016/02/26 职场文书
Mysql - 常用函数 每天积极向上
2021/04/05 MySQL
云服务器部署 Web 项目的实现步骤
2022/06/28 Servers