<template> <div> <el-button v-bind="$attrs">导出</el-button> <div> </template> // 父组件使用 <my-button type='primary' size='mini'/>
组件命名
这里推荐遵循 vue 官方指南，值得一看
我们构建组件的时候通常会将其入口命名为 index.vue ，引入的时候，直接引入该组件的文件夹即可。
但是这样做会有一个问题，当你编辑多个组件的时候，所有的组件入口都叫做index.vue，容易糊涂
vscode 显然意识到了这个问题，所以当文件名相同的文件被打开时，它会在文件名旁边显示文件夹名
如何解决呢，我们可以把 index.js 当作一个单纯的入口，不承担任何逻辑。仅仅负责引入component-name-container以及export default component-name-container
my-app └── src └── components └── component-name ├── component-name.css ├── component-name-container.vue └── index.js
tips（个人喜好）
template,把一个<template> 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素
能用 computed 计算属性的，尽量就不用 watch
模板里面写太多 v-if 会让你的模板很难看，v-else-if尽量还是别用了吧。一长串的 if else，在模板里面看的很乱
以上所述是小编给大家介绍的如何写好一个vue组件详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: