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 select表单提交省市区城市三级联动核心代码
Jun 09 Javascript
node.js中的fs.lstatSync方法使用说明
Dec 16 Javascript
JavaScript实现的类字典插入或更新方法实例
Jul 10 Javascript
JavaScript实现添加及删除事件的方法小结
Aug 04 Javascript
Angular发布1.5正式版,专注于向Angular 2的过渡
Feb 18 Javascript
jQuery图片瀑布流的简单实现代码
Mar 15 Javascript
详解最新vue-cli 2.9.1的webpack存在问题
Dec 16 Javascript
vue2.0 循环遍历加载不同图片的方法
Mar 06 Javascript
Bootstrap Table列宽拖动的方法
Aug 15 Javascript
Vue.js上传图片到阿里云OSS存储的方法示例
Dec 13 Javascript
原生javascript中this几种常见用法总结
Feb 24 Javascript
Vue 根据条件判断van-tab的显示方式
Aug 03 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 Class SoapClient not found解决方法
2018/01/20 PHP
json 入门基础教程 推荐
2009/10/31 Javascript
基于jquery的inputlimiter 实现字数限制功能
2010/05/30 Javascript
Javascript(AJAX)解析XML的代码(兼容FIREFOX/IE)
2010/07/11 Javascript
js(JavaScript)实现TAB标签切换效果的简单实例
2014/02/26 Javascript
JQuery实现展开关闭层的方法
2015/02/17 Javascript
javascript实现回到顶部特效
2015/05/06 Javascript
JS实现简洁、全兼容的拖动层实例
2015/05/13 Javascript
JavaScript中setUTCFullYear()方法的使用简介
2015/06/12 Javascript
javascript轻量级库createjs使用Easel实现拖拽效果
2016/02/19 Javascript
微信小程序开发实战教程之手势解锁
2016/11/18 Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
2016/12/19 Javascript
原生js和css实现图片轮播效果
2017/02/07 Javascript
基于JavaScript实现选项卡效果
2017/07/21 Javascript
js排序与重组的实例讲解
2017/08/28 Javascript
封装运动框架实战左右与上下滑动的焦点轮播图(实例)
2017/10/17 Javascript
详解小程序之简单登录注册表单验证
2019/05/13 Javascript
JS创建自定义对象的六种方法总结
2020/12/15 Javascript
[15:20]DOTA2亚洲邀请赛总决赛开幕式表演:羽泉献唱
2017/04/05 DOTA
Python 稀疏矩阵-sparse 存储和转换
2017/05/27 Python
Python实现的微信公众号群发图片与文本消息功能实例详解
2017/06/30 Python
Python Tkinter模块 GUI 可视化实例
2019/11/20 Python
Python中socket网络通信是干嘛的
2020/05/27 Python
如何使用Python调整图像大小
2020/09/26 Python
Python调用SMTP服务自动发送Email的实现步骤
2021/02/07 Python
Scrapy实现模拟登录的示例代码
2021/02/21 Python
大女孩胸罩:Big Girls Bras
2016/12/15 全球购物
英国最大的宠物商店:Pets at Home
2019/04/17 全球购物
英国第一独立滑雪板商店:The Snowboard Asylum
2020/01/16 全球购物
求职者应聘的自我评价
2013/10/16 职场文书
网上卖盒饭创业计划书
2014/01/26 职场文书
幼儿园运动会入场词
2014/02/10 职场文书
雷锋精神演讲稿
2014/05/13 职场文书
大学活动总结模板
2014/07/10 职场文书
欢送会主持词
2015/07/01 职场文书
2016年学校十一国庆节活动总结
2016/04/01 职场文书