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 相关文章推荐
JavaScript CSS菜单功能 改进版
Dec 20 Javascript
关于jquery append() html时的小问题的解决方法
Dec 16 Javascript
关于extjs treepanel复选框选中父节点与子节点的问题
Apr 02 Javascript
javascript用户注册提示效果的简单实例
Aug 17 Javascript
jQuery获取动态生成的元素示例
Jun 15 Javascript
自定义百度分享的分享按钮
Mar 18 Javascript
原生js和jQuery实现淡入淡出轮播效果
Dec 25 Javascript
纯JS代码实现一键分享功能
Apr 20 Javascript
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
Aug 17 Javascript
vue2中,根据list的id进入对应的详情页并修改title方法
Aug 24 Javascript
微信小程序时间控件picker view使用详解
Dec 28 Javascript
JS中的算法与数据结构之二叉查找树(Binary Sort Tree)实例详解
Aug 16 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编程中尝试程序并发的几种方式总结
2016/03/21 PHP
PHP实现数组根据某个字段进行水平合并,横向合并案例分析
2019/10/08 PHP
JavaScript与函数式编程解释
2007/04/27 Javascript
Javascript 生成指定范围数值随机数
2009/01/09 Javascript
精通Javascript系列之数据类型 字符串
2011/06/08 Javascript
各情景下元素宽高的获取实现代码
2011/09/13 Javascript
40款非常棒的jQuery 插件和制作教程(系列一)
2011/10/26 Javascript
animate动画示例(泪奔的小孩)及stop和delay的使用
2013/05/06 Javascript
JavaScript如何从listbox里同时删除多个项目
2013/10/12 Javascript
js 走马灯简单实例
2013/11/21 Javascript
jquery实现html页面 div 假分页有原理有代码
2014/09/06 Javascript
jQuery验证插件validation使用指南
2015/04/21 Javascript
jQuery实现高亮显示网页关键词的方法
2015/08/07 Javascript
WEB 前端开发中防治重复提交的实现方法
2016/10/26 Javascript
JavaScript递归操作实例浅析
2016/10/31 Javascript
CodeMirror js代码加亮使用总结
2017/03/25 Javascript
Javascript(es2016) import和require用法和区别详解
2017/08/11 Javascript
JavaScript屏蔽Backspace键的实现代码
2017/11/02 Javascript
利用nginx + node在阿里云部署https的步骤详解
2017/12/19 Javascript
快速解决bootstrap下拉菜单无法隐藏的问题
2018/08/10 Javascript
vue基于element的区间选择组件
2018/09/07 Javascript
node express使用HTML模板的方法示例
2019/08/22 Javascript
vue 自定义组件的写法与用法详解
2020/03/04 Javascript
在Django中限制已登录用户的访问的方法
2015/07/23 Python
python中的字典使用分享
2016/07/31 Python
非递归的输出1-N的全排列实例(推荐)
2017/04/11 Python
python 定义n个变量方法 (变量声明自动化)
2018/11/10 Python
详解基于Jupyter notebooks采用sklearn库实现多元回归方程编程
2020/03/25 Python
给校长的建议书
2014/03/12 职场文书
品牌服务方案
2014/06/03 职场文书
机关工会工作总结2015
2015/05/26 职场文书
教师个人工作总结范文2015
2015/10/14 职场文书
班级班风口号大全
2015/12/25 职场文书
2019年度行政文员工作计划范本!
2019/07/04 职场文书
导游词之神仙居景区
2019/11/15 职场文书
Spring中bean集合注入的方法详解
2022/07/07 Java/Android