当前位置: 首页 > Web前端 > HTML

Vue中,如何将函数作为props传递给组件

时间:2023-03-28 16:17:18 HTML

微信搜索【大举走向世界】,前端行业动态,学习路径等第一时间与大家分享。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi,里面有完整的测试站点、资料和我的一线厂商访谈系列文章。Vue新手经常问的一个常见问题。字符串、数组、数字和对象可以作为props传递。但是你可以将函数作为prop传递吗?虽然可以将函数作为prop传递,但这不是一个好方法。恰恰相反,Vue有一个特性就是为了解决这个问题,接下来,我们一起来看看吧。将函数传递给组件将函数或方法作为prop传递给子组件相对简单。事实上,它与传递任何其他变量完全相同:exportdefault{methods:{myFunction(){//...}}};如前所述,你永远不应该在Vue中做这样的事情。为什么?Vue有更好的东西。大家都说简历里没项目可写,所以给大家找了一个项目,还给了一个【搭建教程】。ReactvsVue如果你用过React,你会习惯传递函数。在React中,我们可以将一个函数从父组件传递给子组件,以便子组件可以与父组件进行通信。Props和数据向下流动,函数调用向上流动。然而,Vue有不同的子到父通信机制,Vue使用事件。这与DOM的工作方式相同——Vue的方式比React更符合浏览器。元素可以发出事件,并且可以监听这些事件。因此,尽管在Vue中可以将函数作为props传递,但它被认为是一种反模式。使用事件事件是我们与Vue中的父组件通信的方式。这里有一个简短的例子来说明事件是如何工作的。首先,我们将创建子组件,它在创建时发出一个事件://ChildComponentexportdefault{created(){this.$emit('created');}}在父组件中,我们监听事件:');}}};事件可以做什么有很多,而这只是触及表面。强烈建议查看Vue官方文档以了解更多信息,绝对值得一读。但事件并不能完全解决我们所有的问题。从子组件访问父组件范围内的数据在很多情况下,我们要解决的问题是访问不同范围的数据。父组件有一个作用域,子组件有另一个作用域。通常,我们希望从父组件访问子组件中的值,或者从子组件访问父组件中的值。Vue阻止我们直接这样做是件好事。它使我们的组件更加封装并增加了它们的可重用性。从长远来看,这使我们的代码更清晰,并避免了很多令人头疼的问题。但有时我们可能会尝试通过函数来??绕过这个问题。从父类获取值如果你想让子组件访问父组件的方法,直接将方法作为prop传递似乎很简单。在父组件中我们会这样做:.在我们的子组件中,使用传入的方法://Childexportdefault{props:{method:{type:Function},},mounted(){//这里直接使用父函数this.method();这样做有什么问题?这并不完全错误,但在这种情况下使用事件会更好。然后,当需要时,子组件不调用该函数,而只是发出一个事件。然后父组件将接收事件、调用函数并组装将更新并传递给子组件的道具。这是实现相同效果的更好方法。在其他情况下,我们可能希望从子元素中获取一个值到父元素中,为此我们使用函数。例如,您可能正在这样做。父函数接受子函数的值并进行处理://Parentexportdefault{methods:{parentMethod(valueFromChild){//使用值console.log('Fromthechild:',valueFromChild);}}}在子组件中调用传递的方法,将子组件的值作为方法的参数传递://Childexportdefault{props:{method:{type:Function},},data(){return{价值:“我是孩子。”};},mounted(){//通过函数this.method(this.value)向父级传递一个值;这也不是完全错误的,它是有效的。只是这不是Vue中最好的方式。相反,事件更适合解决这个问题。我们可以使用事件来实现完全相同的事情//Parentexportdefault{methods:{handleSendMessage(event,value){//我们的事件处理程序获取事件,以及孩子传递给事件的任何//参数console.log('Fromthechild:',value);}}}在子组件中,我们发出事件://Childexportdefault{props:{method:{type:Function},},data(){return{value:'Iamthechild.'};},mounted(){//我们没有调用方法而是发出一个事件this.$emit('send-message',this.value);}}事件在Vue中非常有用,但它们也不能100%解决我们的问题。有时,我们需要以不同于父级的方式访问子级的范围。为此,我们使用作用域插槽!使用作用域槽作用域槽是一个更高级的主题,但它们也非常有用。事实上,我认为它们是Vue必须提供的最强大的功能之一。它们削弱了子作用域和父作用域之间的界限。但它是以一种非常干净的方式完成的,使我们的组件像以往一样可组合。如果你想了解更多关于scopedslots的工作原理,你可以先看看官方文档,或者我们下次再解释。代码部署后可能存在的bug,无法实时获知。事后为了解决这些bug,花费了大量的时间在日志调试上。顺便推荐一个好用的bug监控工具Fundebug。来源:https://stackoverflow.com/que...交流有梦想,有干货,微信搜索【大千世界】关注这位大清早还在洗碗的洗碗智慧。本文GitHubhttps://github.com/qq44924588...已收录,有完整的测试站点、资料和我的一线厂商访谈系列文章。