Vue初体验：生命周期与数据共享

前端

2023-06-28 06:14:09

Vue入门指南：深入了解生命周期与数据共享

生命周期

Vue组件的生命周期是一系列钩子函数，允许我们在组件的不同阶段执行特定操作。这些阶段包括：

创建阶段： beforeCreate、created
挂载阶段： beforeMount、mounted
更新阶段： beforeUpdate、updated
销毁阶段： beforeDestroy、destroyed

理解生命周期对于在正确的时间执行操作至关重要。例如，在mounted钩子中访问DOM元素，或在beforeDestroy钩子中清理资源。

数据共享

Vue提供了几种共享组件之间数据的方法，包括：

父子组件通信

props： 父组件传递给子组件的数据
$emit： 子组件向父组件触发事件

兄弟组件通信

$parent： 访问父组件的实例
$refs： 访问兄弟组件的实例

跨组件通信

EventBus： 一个全局事件总线，用于发送和接收事件
Vuex： 一个状态管理库，用于存储和管理应用程序状态

代码示例：

父子组件通信

// 父组件
<template>
  <child-component :message="message"></child-component>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, world!'
    }
  }
}
</script>

// 子组件
<template>
  <p>{{ message }}</p>
</template>

<script>
export default {
  props: ['message']
}
</script>

兄弟组件通信

// 兄弟组件A
<template>
  <input type="text" v-model="message">
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, world!'
    }
  }
}
</script>

// 兄弟组件B
<template>
  <p>{{ message }}</p>
</template>

<script>
export default {
  mounted() {
    this.message = this.$refs.componentA.message
  }
}
</script>

跨组件通信（Vuex）

// Vuex存储
const store = new Vuex.Store({
  state: {
    message: 'Hello, world!'
  }
})

// 组件A
<template>
  <button @click="updateMessage">更新</button>
</template>

<script>
export default {
  methods: {
    updateMessage() {
      this.$store.commit('updateMessage', 'New message')
    }
  }
}
</script>

// 组件B
<template>
  <p>{{ message }}</p>
</template>

<script>
export default {
  computed: {
    message() {
      return this.$store.state.message
    }
  }
}
</script>