详解Vue 单文件组件的三种写法

下面是“详解Vue 单文件组件的三种写法”的完整攻略：

1. 什么是Vue单文件组件？

Vue组件是Vue应用程序的最小组成部分，单文件组件是指一个.vue文件中包含了模板、脚本和样式。

使用单文件组件可以提高代码的可维护性和重用性，方便团队协作和组件化开发。

2. Vue单文件组件的三种写法

2.1. 使用template标签

这种写法是最基本和最容易上手的，直接在单文件组件中使用template标签即可。

<template>
  <h1>Hello, {{name}}!</h1>
</template>

<script>
export default {
  data() {
    return {
      name: 'Jane'
    }
  }
}
</script>

<style scoped>
h1 {
  color: red;
}
</style>

注意，如果要使用该组件，需要在父组件中用import导入，并在components属性中注册。

import HelloWorld from './HelloWorld.vue'

export default {
  components: {
    HelloWorld
  }
}

2.2. 使用render函数

使用render函数可以让组件更加灵活，可以通过JSX或者纯JavaScript来编写模板。

<script>
export default {
  render(h) {
    const message = 'Hello, Jane!'
    const style = {color: 'red'}
    return h('div', [h('h1', {style}, message)])
  }
}
</script>

此时，模板中的内容会被转换为一份JavaScript代码，需要注意模板中的语法并不会被实时检查，因此需要小心编写。

2.3. 使用单文件组件内的template属性

在.vue单文件组件中，可以使用template属性来定义模板。

<template lang="pug">
  div
    h1(style={color: color}) Hello, {{name}}!
</template>

<script>
export default {
  data() {
    return {
      name: 'Jane',
      color: 'red'
    }
  },
  template: require('./HelloWorld.pug')
}
</script>

<style scoped>
h1 {
  font-size: 20px;
}
</style>

在这种方式中，需要注意的是，需要通过require或import来导入模板文件，并通过template属性来定义实际的模板。

3. 示例说明

3.1 使用template标签示例

下面是一个简单的例子，演示如何使用template标签来编写Vue单文件组件。

<template>
  <div>
    <h1>{{title}}</h1>
    <p>{{description}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Welcome to my website',
      description: 'I am the author of this website'
    }
  }
}
</script>

<style scoped>
h1 {
  color: red;
}
</style>

在这个例子中，我们使用了template标签来定义组件的模板，然后通过data方法来定义组件的数据。

3.2. 使用render函数示例

下面是一个使用render函数来编写Vue单文件组件的示例。

<script>
export default {
  data() {
    return {
      title: 'Welcome to my website',
      description: 'I am the author of this website'
    }
  },
  render(h) {
    const title = h('h1', this.title)
    const description = h('p', this.description)
    return h('div', [title, description])
  }
}
</script>

在这个例子中，我们使用了render函数来编写模板，然后定义了组件的数据。注意，我们使用了h函数创建了组件中的元素。