那在vue中怎么获取

在 Vue.js 中，获取数据通常涉及组件间的父子通信或者是响应式数据的直接访问。这里有几个常见的方法：

1. **Props（属性）**：如果父组件需要将数据传递给子组件，可以在子组件的 `props` 中声明，然后在子组件中通过 `this.$props` 访问。

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

<script>
export default {
  data() {
    return { parentData: '这是要传递的数据' };
  }
};
</script>

// 子组件
<script>
export default {
  props: ['data'],
  created() {
    console.log(this.data); // '这是要传递的数据'
  }
};
</script>

2. **Vuex**：对于应用级别的状态管理，Vue 官方推荐使用 Vuex。在 store 中存储数据，然后通过 actions 或 getters 访问。

// store.js
import { mapGetters } from 'vuex';
export const state = {
  user: ''
};

export const getters = {
  getUser: mapGetters(['getUser'])
};

export const mutations = {
  setUser(state, newUser) {
    state.user = newUser;
  }
};

// 组件内获取
computed: {
  userData() {
    return this.getUser();
  }
}

3. **计算属性（Computed）**：创建一个计算属性，它可以依赖于其他数据的变化而自动更新，无需手动触发。

data() {
  return {
    input: ''
  };
},
computed: {
  filteredData() {
    return this.data.filter(item => item.includes(this.input));
  }
}

4. **事件（Event）**：通过 `$emit` 发送自定义事件，在父组件监听并处理这个事件。

<button @click="$emit('getData', 'new value')">获取数据</button>

// 父组件
methods: {
  getData(value) {
    this.childData = value;
  }
}