341、Vue Loader学习笔记05 -【函数式组件】 2020.04.24

1、函数式组件

在一个 *.vue 文件中以单文件形式定义的函数式组件，现在对于模板编译、scoped CSS 和热重载也有了良好的支持。

要声明一个应该编译为函数式组件的模板，请将 functional 特性添加到模板块中。这样做以后就可以省略 <script 块中的 functional 选项。

模板中的表达式会在函数式渲染上下文中求值。这意味着在模板中，prop 需要以 props.xxx 的形式访问：

<template functional>
  <div>{{ props.foo }}</div>
</template>

你可以在 parent 上访问 Vue.prototype 全局定义的属性：

<template functional>
  <div>{{ parent.$someProperty }}</div>
</template>

2、代码校验 (Linting)

2.1 ESLint

官方的 eslint-plugin-vue 同时支持在 Vue 单文件组件的模板和脚本部分的代码校验。

请确认在你的 ESLint 配置文件中使用该插件要导入的配置：

// .eslintrc.js
module.exports = {
  extends: [
    "plugin:vue/essential"
  ]
}

接下来从命令行运行：

eslint --ext js,vue MyComponent.vue

另一个选项是使用 eslint-loader 那么你的 *.vue 文件在开发过程中每次保存的时候就会自动进行代码校验：

npm install -D eslint eslint-loader
请确保它是作为一个 pre-loader 运用的：

// webpack.config.js
module.exports = {
  // ... 其它选项
  module: {
    rules: [
      {
        enforce: 'pre',
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        exclude: /node_modules/
      }
    ]
  }
}

3、参考文献

[01] 函数式组件 - Vue Loader官方文档
[02] 代码校验 - Vue Loader官方文档