做者:Michael Thiessen
译者:前端小智
来源:medium
点赞再看,养成习惯本文
GitHub
https://github.com/qq44924588... 上已经收录,更多往期高赞文章的分类,也整理了不少个人文档,和教程资料。欢迎Star和完善,你们面试能够参照考点复习,但愿咱们一块儿有点东西。html
Vue 新手常常问的一个常见问题。能够将字符串、数组、数字和对象做为props
传递。可是你能把一个函数看成一个props
来传递吗?前端
虽然能够将函数做为props
传递,但这种方式很差。相反,Vue 有一个专门为解决这问题而设计的功能,接下来,咱们来看看。vue
获取一个函数或方法并将其做为一个prop传递给子组件相对比较简单。实际上,它与传递任何其余变量方式彻底相同:git
<template> <ChildComponent :function="myFunction" /> </template> export default { methods: { myFunction() { // ... } } };
正如前面所说,在Vue中永远都不要作这样的事情。github
为何?Vue有更好的东西。面试
你们都说简历没项目写,我就帮你们找了一个项目,还附赠【搭建教程】。数组
若是使用过 React,就会习惯传递函数方式。浏览器
在React中,咱们能够将一个函数从父组件传递给子组件,以便子组件可以向上与父组件通讯。props 和 data 向下流动,函数调用向上流动。微信
然而,Vue有一种不一样的机制来实现子到父通讯方式,Vue 使用事件。ide
这与 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() { // ... } } }
在咱们的子组件中,使用传入的方法:
// Child export default { props: { method: { type: Function }, }, mounted() { // Use the parent function directly here this.method(); } }
这样作会有什么问题?
这并非彻底错误的,可是在这种状况下使用事件会更好。
而后,当须要时,子组件不会调用该函数,而只是发出一个事件。而后父组件将接收该事件,调用该函数,拼装将更新传递给子组件的 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...
文章每周持续更新,能够微信搜索「 大迁世界 」第一时间阅读和催更(比博客早一到两篇哟),本文 GitHub https://github.com/qq449245884/xiaozhi 已经收录,整理了不少个人文档,欢迎Star和完善,你们面试能够参照考点复习,另外关注公众号,后台回复福利,便可看到福利,你懂的。