Vue.js组件开发实战指南_vuejs组件开发实例-CSDN博客

本文链接：https://blog.csdn.net/2401_88888297/article/details/143829246

组件是Vue框架中最核心的特性，它允许我们把页面拆分成独立可复用的小块。一个优秀的组件设计能让代码更容易维护，也能提高开发效率。

基础组件结构一个标准的Vue组件包含三个部分：模板(template)、脚本(script)和样式(style)。就像搭积木一样，这三个部分各司其职又紧密配合。

<template>
  <div class="user-card">
    <img :src="avatar" alt="用户头像">
    <h2>{{ username }}</h2>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'UserCard',
  props: {
    username: {
      type: String,
      required: true
    },
    avatar: {
      type: String,
      default: '/default-avatar.png'
    }
  }
}
</script>

<style scoped>
.user-card {
  border: 1px solid #ddd;
  padding: 15px;
  border-radius: 8px;
}
</style>

组件通信方式父子组件之间的通信就像人际交往一样，既要会说（发送数据）也要会听（接收数据）。Props向下传递，Events向上传递，就是最基本的通信方式。

Props传递数据

<!-- 父组件 -->
<template>
  <user-profile 
    :user-info="userInfo" 
    @update-info="handleUpdate"
  />
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        name: '张三',
        age: 25
      }
    }
  },
  methods: {
    handleUpdate(info) {
      this.userInfo = {...info}
    }
  }
}
</script>

自定义事件

<!-- 子组件 -->
<template>
  <button @click="updateInfo">更新信息</button>
</template>

<script>
export default {
  methods: {
    updateInfo() {
      this.$emit('update-info', {
        name: '李四',
        age: 30
      })
    }
  }
}
</script>

生命周期钩子组件的生命周期就像人的一生，从出生（created）到成长（mounted）再到消亡（destroyed）。了解这些钩子函数的特点，可以在合适的时机执行特定的代码。

export default {
  created() {
    // 组件实例创建完成，可以访问data和methods
    this.loadInitialData()
  },
  
  mounted() {
    // DOM已经渲染完成，可以进行DOM操作
    this.initChart()
  },
  
  beforeDestroy() {
    // 组件即将销毁，清理定时器等资源
    clearInterval(this.timer)
  }
}

组件复用与混入当多个组件有相同的功能时，我们可以通过混入(mixin)来复用代码。这就像是在做菜时准备的调味料，可以用在不同的菜品中。

// mixin.js
export const dataMixin = {
  data() {
    return {
      loading: false,
      error: null
    }
  },
  methods: {
    async fetchData() {
      this.loading = true
      try {
        const result = await this.apiRequest()
        this.handleSuccess(result)
      } catch (err) {
        this.error = err.message
      } finally {
        this.loading = false
      }
    }
  }
}

// 使用混入
import { dataMixin } from './mixin'

export default {
  mixins: [dataMixin],
  methods: {
    async apiRequest() {
      // 具体的API请求实现
    },
    handleSuccess(data) {
      // 处理成功响应
    }
  }
}

插槽使用插槽让组件变得更加灵活，就像是给组件预留了一些"空位"，可以根据需要填入不同的内容。

<!-- 基础插槽 -->
<template>
  <div class="card">
    <div class="header">
      <slot name="header">默认标题</slot>
    </div>
    <div class="content">
      <slot></slot>
    </div>
    <div class="footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<!-- 使用插槽 -->
<card>
  <template #header>
    <h2>用户信息</h2>
  </template>
  <p>这是主要内容</p>
  <template #footer>
    <button>确定</button>
  </template>
</card>

状态管理对于复杂的组件通信，我们可以使用Vuex进行状态管理。这就像是给所有组件配备了一个共同的管家，统一管理共享数据。

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    userInfo: null,
    token: localStorage.getItem('token')
  },
  mutations: {
    SET_USER_INFO(state, info) {
      state.userInfo = info
    },
    SET_TOKEN(state, token) {
      state.token = token
      localStorage.setItem('token', token)
    }
  },
  actions: {
    async login({ commit }, credentials) {
      const { token, user } = await loginAPI(credentials)
      commit('SET_TOKEN', token)
      commit('SET_USER_INFO', user)
    }
  }
})

组件性能优化优化组件性能就像给汽车做保养，定期的维护可以让它跑得更快更稳。

使用计算属性代替复杂的模板表达式

export default {
  data() {
    return {
      items: []
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => item.active)
        .map(item => ({
          ...item,
          price: `￥${item.price.toFixed(2)}`
        }))
    }
  }
}

合理使用v-show和v-if

<!-- 频繁切换用v-show -->
<div v-show="isVisible">
  频繁切换的内容
</div>

<!-- 条件渲染用v-if -->
<div v-if="isLoggedIn">
  用户才能看到的内容
</div>

使用keep-alive缓存组件

<keep-alive>
  <component :is="currentComponent" />
</keep-alive>

组件测试给组件写测试就像给产品做质检，可以保证组件在各种情况下都能正常工作。

// UserProfile.spec.js
import { mount } from '@vue/test-utils'
import UserProfile from '@/components/UserProfile.vue'

describe('UserProfile', () => {
  test('displays user information correctly', () => {
    const wrapper = mount(UserProfile, {
      propsData: {
        username: '张三',
        email: 'zhangsan@example.com'
      }
    })
    
    expect(wrapper.find('.username').text()).toBe('张三')
    expect(wrapper.find('.email').text()).toBe('zhangsan@example.com')
  })
  
  test('emits update event when save button clicked', async () => {
    const wrapper = mount(UserProfile)
    await wrapper.find('.save-btn').trigger('click')
    expect(wrapper.emitted('update')).toBeTruthy()
  })
})

实战技巧总结：