[vue] 写出多种定义组件模板的方法

[haizhilin2013]

[vue] 写出多种定义组件模板的方法

[xunbie]

https://blog.csdn.net/alphapersonality/article/details/80248005

[veWangCorn]

1、字符串
2、模板字面量
3、<script type="x-template"></script>
4、文件组件模板
5、inline-template

[qq-radio]

1、字符串、模板字面量
2、x-template

<script type="text/x-template" id="checkbox-template"></script>

Vue.component('my-checkbox', {
template: '#checkbox-template',
data() { },
});
3、inline-template内联模板

Vue.component('my-checkbox', {
data() { },
});
4、单个文件，xx.vue

[Cai-zhiji]

使用字符串模板

可以直接在组件选项中使用template属性定义字符串模板。

Vue.component('my-component', {
  template: '<div>This is a component template</div>',
});

使用单文件组件（sfc）

单文件组件是一种将组件的模板、样式和逻辑封装在单个文件中的方式。
在单文件组件中，使用标签定义组件的模板。

<template>
  <div>This is a component template</div>
</template>

使用渲染函数

渲染函数是一种以JavaScript函数的形式来定义组件的模板的方式。
渲染函数接收一个createElement函数作为参数，通过调用createElement函数来创建虚拟DOM。

Vue.component('my-component', {
  render: function(createElement) {
    return createElement('div', 'This is a component template');
  },
});

使用JSX（需要Babel或TypeScript支持）

JSX是一种将HTML结构和JavaScript代码组合在一起编写组件的语法扩展。
使用JSX可以更直观地描述组件的结构和交互。

Vue.component('my-component', {
  render() {
    return <div>This is a component template</div>;
  },
});