Vue 自定义组件模板的七种方式

参考来源 7 Ways to Define a Component Template in Vue.js - Vue.js Developers (vuejsdevelopers.com)

纯字符串
模板文本
X 模板
内联模板
渲染函数
断续器
单文件组件

在 Vue 中定义一个组件模板，至少有七种不同的方式

纯字符串

定义 Vue 组件模板的最快、最简单的方法是向组件定义添加一个属性，并分配一个包含标记的常规字符串。

但是，此方法实际上仅用于代码示例或快速原型，因为除了最简单的模板之外，很难使用任何内容。

Vue.component('my-checkbox', {
  template: '
{{ title }}',
  data() {
    return { checked: false, title: 'Check me' }
  },
  methods: {
    check() { this.checked = !this.checked; }
  }
});

模板文本

ES6 模板字面量允许你使用多行定义模板，这在常规 JavaScript 字符串中是不被允许的。此方式阅读体验更佳，并在许多现代浏览器中得到支持，不过安全起见你还是需要把代码转换成 ES5 。

这种方法并不完美，我发现大多数 IDE 仍然会通过语法高亮、tab 格式化、换行符等地方的问题折磨着你。
从 ES2015 开始，可以使用反引号声明一种称为模板文本的特殊字符串。与常规字符串不同，这些字符串允许嵌入表达式，并且可以是多行的。

与常规字符串相比，多行功能使这些模板对于定义组件模板更有用，因为它们使标记更具可读性。

Vue.component('my-checkbox', {
  template: `
    
      
      {{ title }}
    
  `,
  data() {
    return { checked: false, title: 'Check me' }
  },
  methods: {
    check() { this.checked = !this.checked; }
  }
});

X 模板 text/x-template

使用此方法时，模板将在索引.html文件中的脚本标记内定义。脚本标记在组件定义中由 id 指定类型和引用。text/x-template

从好的方面来说，此方法允许您在 HTML 文件中编写模板标记。缺点是它将模板与组件定义的其余部分分开，因此可能有点难以推理。

Vue.component('my-checkbox', {
  template: '#checkbox-template',
  data() {
    return { checked: false, title: 'Check me' }
  },
  methods: {
    check() { this.checked = !this.checked; }
  }
});

...

内联模板 inline-template

使用此方法，可以在使用组件时在父模板中定义组件的模板。只要确保添加属性，以便 Vue 知道在哪里可以找到它。inline-template

该方法具有与x模板大致相同的优点和缺点。一个有趣的区别是，由于模板可以在文档正文中定义，因此可以对内容进行SEO爬网。

Vue.component('my-checkbox', {
  data() {
    return { checked: false, title: 'Check me' }
  },
  methods: {
    check() { this.checked = !this.checked; }
  }
});


  ...
  
    
      
      {{ title }}

渲染函数 render

渲染函数要求您使用纯 JavaScript 定义模板。您需要阅读 Vue 文档以了解确切的语法，但粗略的想法是，您可以通过调用来定义模板节点。createElement(tag, options, childElements)

这样做的好处是，它不需要任何形式的编译，并且允许您完全访问JavaScript功能，而不是指令提供的功能。例如，要在标记模板中进行迭代，您只能使用，但在 JavaScript 中，可以使用任何数组方法。v-for

但是，渲染函数比其他模板选项要冗长和抽象得多，我不希望很多人愿意编写这样的整个应用程序。

Vue.component('my-checkbox', {
  data() {
    return { checked: false, title: 'Check me' }
  },
  methods: {
    check() { this.checked = !this.checked; }
  },
  render(createElement) {
    return createElement(
      'div', {
        attrs: {
          'class': 'checkbox-wrapper'
        },
        on: {
          click: this.check
        }
      },
      [
        createElement(
          'div', {
            'class': {
              checkbox: true,
              checked: this.checked
            }
          }
        ),
        createElement(
          'div', {
            attrs: {
              'class': 'title'
            }
          },
          [this.title]
        )
      ]
    );
  }
});

断续器 JSX

JSX 是 JavaScript 的扩展，它允许您在 JavaScript 代码中使用特殊的模板语法。

由 React 推广，这是 Vue 中最有争议的模板选项，因为一些开发人员认为它丑陋、不直观，是对 Vue 精神的背叛。

但是，JSX 可用于以更具可读性和更不抽象的方式编写 Vue 渲染函数。但是，它确实需要您转译，因为浏览器无法读取JSX。

Vue.component('my-checkbox', {
  data() {
    return { checked: false, title: 'Check me' }
  },
  methods: {
    check() { this.checked = !this.checked; }
  },
  render() {
    return 
            
            { this.title }
          
  }
});

单文件组件

Vue.js最受欢迎的功能之一是单文件组件（SFC）。这些允许您编写标记，同时将组件定义保存在一个文件中。它们由 vue 加载程序编译为渲染函数，因此您也可以获得最佳的运行时性能。

要创建 SFC，首先要创建一个 .vue 文件（例如 Checkbox.vue），然后在标记中定义模板并在标记中定义组件。然后，此文件将导入到您的主 Vue 应用程序中。templatescript

只要您愿意使用 Vue CLI 或在项目中设置自己的构建工具，SFC 就是您的不二之选。

当然没有一个完美的方法，每一个都应该根据你的用例来判断。我认为最好的开发人员会注意到所有的可能性，并将它们作为 Vue.js 工具栏的一个工具。