Vue SFC 是框架指定的文件格式,由 @vue/compiler-sfc 编译成标准的 jsvascript 与 css

函数式组件

函数式组件是无状态的,它无法实例化,没有任何的生命周期和方法。创建函数式组件也很简单,只需要在模板添加 functional 声明即可。一般适合只依赖于外部数据的变化而变化的组件,因其轻量,渲染性能也会有所提高。

组件需要的一切都是通过 context 参数传递。它是一个上下文对象,具体属性查看文档。这里 props 是一个包含所有绑定属性的对象。

函数式组件

  1. <template functional>
  2. <div class="list">
  3. <div class="item" v-for="item in props.list" :key="item.id" @click="props.itemClick(item)">
  4. <p>{{item.title}}</p>
  5. <p>{{item.content}}</p>
  6. </div>
  7. </div>
  8. </template>

父组件使用

  1. <template>
  2. <div>
  3. <List :list="list" :itemClick="item => (currentItem = item)" />
  4. </div>
  5. </template>
  6. import List from '@/components/List.vue'
  7. export default {
  8. components: {
  9. List
  10. },
  11. data() {
  12. return {
  13. list: [{
  14. title: 'title',
  15. content: 'content'
  16. }],
  17. currentItem: ''
  18. }
  19. }
  20. }

方法

我们用 methods 选项向组件实例添加方法,它应该是一个包含所需方法的对象:

  1. const app = Vue.createApp({
  2. data() {
  3. return { count: 4 }
  4. },
  5. methods: {
  6. increment() {
  7. // `this` 指向该组件实例
  8. this.count++
  9. }
  10. }
  11. })
  12. const vm = app.mount('#app')
  13. console.log(vm.count) // => 4
  14. vm.increment()
  15. console.log(vm.count) // => 5