//data-show.vue <template> <div> <ul> <li v-for="item in list"> <span>{{item.title}}</span> <slot v-bind:item="item"> </slot> </li> </ul> </div> </template> //list.vue <template> <p>列表页</p> <data-show :list="list"> <template slot-scope="slotProps"> <span v-if="slotProps.item.complete">✓</span> <span v-else>x</span> </template> </data-show> </template> //edit.vue <template> <p>编辑页</p> <data-show :list="list"> <template slot-scope="slotProps"> <a v-if="slotProps.item.complete">查看</a> <a v-else>修改</a> </template> </data-show> </template>
五、Vue的错误捕获
全局配置errorHandler
从2.2.0起，这个钩子也会捕获组件生命周期钩子里的错误。
从 2.4.0 起这个钩子也会捕获 Vue 自定义事件处理函数内部的错误了。
更详细的说明可以查看文档errorHandler
生命周期钩子errorCaptured
2.5.0+新增
更详细的说明可以查看文档errorCaptured
如果熟悉React的话，会发现它跟错误边界(Error Boundaries)的概念很像，实际上也确实是这么用的。
在文档Error Handling with errorCaptured Hook就举了一个典型的例子
Vue.component('ErrorBoundary', { data: () => ({ error: null }), errorCaptured (err, vm, info) { this.error = `${err.stack}\n\nfound in ${info} of component` return false }, render (h) { if (this.error) { return h('pre', { style: { color: 'red' }}, this.error) } // ignoring edge cases for the sake of demonstration return this.$slots.default[0] } }) <error-boundary> <another-component/> </error-boundary>
需要强调的是errorCaptured并不能捕获自身错误和异步错误（比如网络请求，鼠标事件等产生的错误）。
In 2.5 we introduce the new errorCaptured hook. A component with this hook captures all errors (excluding those fired in async callbacks) from its child component tree (excluding itself).
参考
https://github.com/vuejs/vue/releases
https://github.com/vuejs/vue-loader/releases
总结
以上所述是小编给大家介绍的符Vue高版本中一些新特性的使用，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！