如何构建运行良好的Vue组件
现在发生在textarea上的事件是交付事件。如何理解vue中的$listeners属性？假设有父组件Parent和子组件Child//Parent
......然后当你使用Child时，所有传入的v-on事件都可以在$listeners对象中找到。//Childcreated(){console.log(this.$listeners)//{'event-one':f(),'event-two':f()}}将属性分配给正确的元素howtohandletextarearows或者在任何元素上为简单的工具提示添加标题标签等属性？默认情况下，Vue获取应用于组件的属性并将其放置在该组件的根元素上。但这并不总是我们想要的。如果我们从上方再次查看textarea包装器，在这种情况下将属性应用于textarea本身而不是div更有意义。为此，我们告诉组件默认不应用属性，而是使用$attrs对象直接应用它们，在JS代码中：exportdefault{inheritAttrs:false,}inthetemplate
官方文档在讲解组件的属性传递的时候，讲到了$attrs和inheritAttrs这两个属性，以及组合这两个属性会更有用。乍一看没看懂，结合代码演示想明白了。从“vue”导入Vue；Vue.component('base-input',{inheritAttrs:false,props:['label','value'],template:`
`})newVue({el:'#root',模板:`
`,data:{username:'',}})首先隐藏inheritAttrs:false而v-bind="$attrs"，浏览器得到的结果如下：这里有两个例外：父组件中设置的占位符等属性没有传递给子组件；父组件设置的属性通过给子组件的根元素，即label，不需要label。$attrs和inheritAttrs:false分别用来解决这两个问题。首先，inheritAttrs:false解决了子组件根元素继承父元素属性的问题；其次，子组件中添加了v?bind="$attrs"的元素会继承父组件的属性，即使props中没有定义该属性接受浏览器的键盘导航规范Accessibility和键盘导航是最常用的在Web开发中被遗忘的部分之一，也是编写组件以在生态系统中正常运行时最重要的事情之一。这意味着确保组件符合浏览器规范：tab键应该允许选择表单字段。Enter通常用于激活按钮或链接。可以在W3C网站上找到通用组件的键盘导航建议的完整列表。遵循这些建议将使您的组件可用于所有应用程序，而不仅仅是那些与可访问性无关的应用程序。使用事件而不是回调当涉及到从组件到其父组件的数据通信和用户交互时，有两种常见的选择：道具和事件中的回调函数。因为Vue的自定义事件不会像浏览器原生事件那样冒泡，所以两者在功能上是等价的，但是对于可重用的组件，能用就推荐用事件，后面是回调。为什么？？在FullstackRadio的一集中，Vue核心团队成员ChrisFritz给出了以下原因：使用事件可以清楚父组件知道什么。它明确区分了“我们从父组件获得的”和“我们发送给组件的”。表达式可以直接在事件处理程序中使用，为简单的情况提供极其紧凑的事件处理程序。它更加地道——Vue示例和文档倾向于使用事件来实现组件与其父组件之间的通信。幸运的是，如果您当前正在使用props回调，则很容易修改您的组件以发出事件。使用回调的组件可以如下所示：//my-custom-component.vueexportdefault{props:['onActionHappened',...]methods(){handleAction(){...//你的自定义代码if(typeof这个.onActionHappened==='函数'){this.onActionHappened(data);}}}}外部调用方法：改为基于事件的方法如下：//my-custom-component.vueexportdefault{methods(){handleAction(){...//你的自定义代码this.$emit('action-happened',data);}}}外部调用方式：限制组件样式Vue的单文件组件结构允许我们将样式直接嵌入到组件中，尤其是与作用域结合时，这给了我们在不影响应用程序其他部分的情况下发布完全打包的样式化组件的好方法。由于该系统的强大功能，可以轻松地将所有组件样式放入一个组件中并交付一个完全样式化的组件。事情是这样的：没有应用程序的样式是相同的，使组件在我们的应用程序中看起来完美的因素将使它在其他人的应用程序中脱颖而出。由于组件样式通常晚于全局样式表被包含，覆盖它可能成为一个特殊性的噩梦。为防止这种情况，建议在我们的组件文件本身中排除或关闭组件结构不需要的任何CSS（颜色、边框、阴影等）。相反，请考虑维护一个可自定义的SCSS部分，允许用户根据自己的喜好进行自定义。 在JS中：exportdefault{props:{disableStyles:{type:Boolean,default:false}},computed:{isStyledClass(){if(!this.disableStyles){返回'is-styled';然后，我们可以@import'my-component-styles';.is-styled{@includemy-component-styles();}这将允许我们使用开箱即用的样式我们很高兴，但是想要自定义的用户不再需要创建高度特定的覆盖，他们可以通过将disableStyles属性设置为true来简单地关闭样式。代码部署后可能存在的bug，无法实时获知。事后为了解决这些bug，花费了大量的时间在日志调试上。顺便推荐一个好用的bug监控工具Fundebug。原文：https://vuejsdevelopers.com/2...每周更新交流文章。可以微信搜索“大千世界”阅读即时更新（比博文早一两篇）。这篇文章在GitHubhttps://github.com/qq449245884/xiaozhi已经收录，整理了很多我的文档。欢迎star和改进。可以参考考点面试。另外，关注公众号，后台会回复福利，看到福利就知道了。
