浅析Vue单文件组件与非单文件组件使用方法

Vue.js是目前非常热门的前端框架之一，其最大的特点是组件化。在Vue中组件是非常重要的概念之一，而Vue组件又分为单文件组件与非单文件组件。那么，我们如何选择使用单文件组件和非单文件组件呢？

非单文件组件的使用

非单文件组件一般是通过script标签直接将Vue组件定义在html文件中。下面是一个例子：

<div id="app">
  <my-component></my-component>
</div>

<script>
  Vue.component('my-component', {
    template: '<div>这是一个非单文件组件</div>'
  })

  new Vue({
    el: '#app'
  })
</script>

在这个例子中，我们通过全局方法Vue.component()注册了一个名为'my-component'的组件。该组件的模板字符串为'

这是一个非单文件组件

'。 然后，在new Vue()中传入了一个el属性，它将这个Vue实例挂载到id为'app'的DOM元素上。 最后，我们在html中使用了组件标签''。

这种方法的好处是简单、便捷，可以快速实现组件功能。但是，这种方法难以对组件进行修改、调试、管理，且会使HTML文件变得冗长。

单文件组件的使用

单文件组件其实就是将应用程序拆分成一个个小的组件化文件，便于管理和维护。在Vue中，单文件组件一般由template、script和style三部分构成，具体如下：

<template>
  <div>这是一个单文件组件</div>
</template>

<script>
export default {
  name: 'my-component',
  data () {
    return {
      msg: 'Hello, Vue!'
    }
  },
  methods: {
    greet () {
      alert(this.msg)
    }
  }
}
</script>

<style scoped>
div {
  font-size: 20px;
  color: #f00;
  font-weight:bold;
}
</style>

这个文件中的template标签是模板字符串，表示这个组件的 template 代码。script标签中则是定义了Vue组件的相关状态和方法。而style标签用于定义组件的样式。这三部分通过一个单独的文件组合在一起，方便阅读和管理。

使用单文件组件需要使用Vue CLI—一个官方提供的脚手架工具。在使用 Vue CLI 创建的项目中，我们可以通过 webpack 将单文件组件编译成普通的js文件，然后在HTML文件中引入这些文件。

下面是一个通过Vue CLI创建的项目，其中的单文件组件'HelloWorld.vue'：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <button @click="greet">Greet</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Hello, Vue!'
    }
  },
  methods: {
    greet () {
      alert(this.msg)
    }
  }
}
</script>

<style scoped>
h1 {
  font-size: 4em;
  color: blue;
}
</style>

要使用这个组件，我们需要在其他Vue组件（或者Vue实例）中引入这个组件：

<template>
  <div>
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

如此一来，我们就可以在项目中使用这个单文件组件了。

示例说明

例子1：使用非单文件组件

<div id="app">
  <my-component></my-component>
</div>

<script>
  Vue.component('my-component', {
    template: '<div>这是一个非单文件组件</div>'
  })

  new Vue({
    el: '#app'
  })
</script>

这个例子中，我们通过Vue.component()方法定义了'my-component'组件，并在Vue实例中组载了它。最终，''标签就可以在app容器中正常使用。

例子2：使用单文件组件

<template>
  <div>
    <Hello-World />
  </div>
</template>

<script>
import HelloWorld from './components/Hello-World.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

这个例子中，我们通过import关键字引入了一个单文件组件'Hello-World.vue'，并将它注册为了一个组件。最后，在template模板字符串中使用组件标签''即可。