vue实现数据交互

Vue 实现数据交互的方法

使用 props 和 $emit 实现父子组件通信

父组件通过 props 向子组件传递数据，子组件通过 $emit 触发事件并传递数据给父组件。

父组件代码示例：

<template>
  <ChildComponent :message="parentMessage" @update="handleUpdate" />
</template>

<script>
export default {
  data() {
    return {
      parentMessage: 'Hello from parent'
    }
  },
  methods: {
    handleUpdate(newMessage) {
      this.parentMessage = newMessage
    }
  }
}
</script>

子组件代码示例：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="sendMessage">Send Message</button>
  </div>
</template>

<script>
export default {
  props: ['message'],
  methods: {
    sendMessage() {
      this.$emit('update', 'New message from child')
    }
  }
}
</script>

使用 Vuex 进行状态管理

Vuex 是 Vue 的官方状态管理库，适合中大型应用中的数据共享和状态管理。

安装 Vuex：

npm install vuex

创建 store：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment')
    }
  },
  getters: {
    doubleCount: state => state.count * 2
  }
})

export default store

在组件中使用：

<template>
  <div>
    <p>{{ count }}</p>
    <p>{{ doubleCount }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState(['count']),
    ...mapGetters(['doubleCount'])
  },
  methods: {
    ...mapActions(['increment'])
  }
}
</script>

使用 provide/inject 实现跨层级组件通信

适合祖先组件与深层嵌套组件之间的通信。

祖先组件：

<script>
export default {
  provide() {
    return {
      sharedData: this.sharedData
    }
  },
  data() {
    return {
      sharedData: 'Shared data'
    }
  }
}
</script>

后代组件：

<script>
export default {
  inject: ['sharedData'],
  mounted() {
    console.log(this.sharedData) // 输出: Shared data
  }
}
</script>

使用事件总线实现非父子组件通信

创建事件总线实例：

// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()

组件 A 发送事件：

<script>
import { EventBus } from './event-bus.js'

export default {
  methods: {
    sendMessage() {
      EventBus.$emit('message', 'Hello from Component A')
    }
  }
}
</script>

组件 B 接收事件：

<script>
import { EventBus } from './event-bus.js'

export default {
  created() {
    EventBus.$on('message', message => {
      console.log(message) // 输出: Hello from Component A
    })
  }
}
</script>

使用 axios 进行 HTTP 请求

安装 axios：

npm install axios

在组件中使用：

<script>
import axios from 'axios'

export default {
  data() {
    return {
      posts: []
    }
  },
  async created() {
    try {
      const response = await axios.get('https://jsonplaceholder.typicode.com/posts')
      this.posts = response.data
    } catch (error) {
      console.error(error)
    }
  }
}
</script>

使用 $refs 访问子组件实例

父组件可以通过 $refs 直接访问子组件的属性和方法。

父组件：

<template>
  <ChildComponent ref="child" />
  <button @click="callChildMethod">Call Child Method</button>
</template>

<script>
export default {
  methods: {
    callChildMethod() {
      this.$refs.child.childMethod()
    }
  }
}
</script>

子组件：

<script>
export default {
  methods: {
    childMethod() {
      console.log('Child method called')
    }
  }
}
</script>