微信搜索【大举走向世界】，前端行业动态，学习路径等第一时间与大家分享。本文已收录到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...已收录，有完整的测试站点、资料和我的一线厂商访谈系列文章。
