Vue组件踩坑记与经验分享

2023-11-13 12:57:10

正文：
组件化是现代前端开发中不可或缺的一部分，Vue作为当下流行的前端框架，自然也支持组件化开发，本文以Vue.js为例，来讲解在编写Vue组件时经常遇到的几个问题。

父子组件通信时emit和on不生效

这个问题往往是由于父子组件不是同一个组件树造成的。父子组件通信需要通过组件树来传递数据，如果父子组件不是同一个组件树，那么emit和on就无法生效。

App.vue
<template>
  <div>
    <child-component @update="handleUpdate"></child-component>
  </div>
</template>

<script>
export default {
  methods: {
    handleUpdate(value) {
      // ...
    }
  }
}
</script>

ChildComponent.vue
<template>
  <div>
    <button @click="emitUpdate">触发更新</button>
  </div>
</template>

<script>
export default {
  methods: {
    emitUpdate() {
      this.$emit('update', 'some value')
    }
  }
}
</script>

此时handleUpdate函数不会被调用。要使emit和on生效，需要确保父子组件在同一个组件树中。一种常见的方法是将子组件作为插槽内容传递给父组件，另一种方法是使用provide/inject进行通信。

组件间样式隔离问题

Vue组件的样式默认是全局作用域的，这意味着一个组件的样式可能会影响到其他组件。要解决这个问题，可以在组件的样式中使用scoped属性。

<style scoped>
.component-class {
  color: red;
}
</style>

这样做可以将组件的样式隔离到组件内部，不会影响到其他组件。

组件间数据共享问题

在Vue组件中，组件间的数据共享可以通过props、events和状态管理等方式实现。

props ：props是组件接收父组件数据的属性，可以通过在组件的template中使用v-bind绑定数据来实现。
events ：events是组件向父组件发送数据的事件，可以通过在组件的template中使用v-on绑定事件来实现。
状态管理 ：状态管理是通过一个全局状态树来管理组件间的数据共享，可以通过使用Vuex等状态管理库来实现。

根据不同的需求，可以选择合适的方式来实现组件间的数据共享。

组件生命周期钩子

Vue组件的生命周期钩子是可以在组件的不同生命周期阶段调用的函数，常用的钩子包括created、mounted、updated和destroyed等。

export default {
  created() {
    // 组件创建时执行
  },
  mounted() {
    // 组件挂载时执行
  },
  updated() {
    // 组件更新时执行
  },
  destroyed() {
    // 组件销毁时执行
  }
}