外部如何获取vue得到的值

外部获取Vue得到的值可以通过以下几种方式：1、使用事件机制；2、通过Vue的实例方法；3、使用Vuex进行状态管理；4、通过props和$emit进行父子组件通信；5、使用全局事件总线（Event Bus）；6、借助浏览器的LocalStorage或SessionStorage。以下将详细介绍使用事件机制这一方法。

事件机制是指通过触发和监听事件来实现组件间的数据传递和通信。在Vue中，组件可以通过$emit方法触发一个自定义事件，并可以传递数据到父组件。父组件可以通过v-on指令来监听子组件触发的事件，从而获取子组件传递过来的数据。这种方式非常适合父子组件之间的通信。

一、使用事件机制

1、子组件使用$emit方法触发事件

在子组件中，使用$emit方法来触发一个自定义事件，并传递数据。例如：

<template>
  <button @click="sendValue">Send Value</button>
</template>
<script>
export default {
  methods: {
    sendValue() {
      this.$emit('send-value', 'Hello from Child');
    }
  }
}
</script>

2、父组件监听子组件事件并获取值

在父组件中，通过v-on指令监听子组件触发的事件，并获取传递过来的数据。例如：

<template>
  <div>
    <ChildComponent @send-value="handleValue"/>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  },
  methods: {
    handleValue(value) {
      console.log('Received value from child:', value);
    }
  }
}
</script>

二、通过Vue的实例方法

1、获取Vue实例

可以通过在外部获取Vue实例的方式来访问Vue中的数据和方法。例如：

const vm = new Vue({
  data() {
    return {
      value: 'Hello, Vue!'
    }
  }
});
console.log(vm.value); // 输出：Hello, Vue!

2、使用实例方法访问数据

通过实例方法，可以直接访问和操作Vue实例中的数据。例如：

vm.value = 'New Value';
console.log(vm.value); // 输出：New Value

三、使用Vuex进行状态管理

1、创建Vuex Store

首先，需要创建一个Vuex Store来管理应用的状态。例如：

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
  state: {
    value: 'Hello, Vuex!'
  },
  mutations: {
    setValue(state, newValue) {
      state.value = newValue;
    }
  }
});

2、在组件中访问和修改状态

在组件中，可以通过this.$store来访问和修改Vuex Store中的状态。例如：

<template>
  <div>
    <p>{{ value }}</p>
    <button @click="updateValue">Update Value</button>
  </div>
</template>
<script>
export default {
  computed: {
    value() {
      return this.$store.state.value;
    }
  },
  methods: {
    updateValue() {
      this.$store.commit('setValue', 'New Value from Component');
    }
  }
}
</script>

四、通过props和$emit进行父子组件通信

1、子组件通过props接收数据

在子组件中，通过props属性接收父组件传递的数据。例如：

<template>
  <div>
    <p>{{ value }}</p>
  </div>
</template>
<script>
export default {
  props: ['value']
}
</script>

2、父组件通过$emit传递数据

在父组件中，通过v-bind指令绑定数据到子组件的props属性。例如：

<template>
  <div>
    <ChildComponent :value="parentValue"/>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentValue: 'Hello from Parent'
    }
  }
}
</script>

五、使用全局事件总线（Event Bus）

1、创建事件总线

可以通过创建一个新的Vue实例来作为全局事件总线。例如：

const EventBus = new Vue();
export default EventBus;

2、触发和监听事件

在需要触发事件的组件中，通过事件总线触发事件；在需要监听事件的组件中，通过事件总线监听事件。例如：

// 触发事件
EventBus.$emit('event-name', 'Hello, Event Bus');
// 监听事件
EventBus.$on('event-name', (message) => {
  console.log('Received message:', message);
});

六、借助浏览器的LocalStorage或SessionStorage

1、设置数据到LocalStorage

可以通过浏览器的LocalStorage来存储数据。例如：

localStorage.setItem('key', 'Hello, LocalStorage');

2、从LocalStorage获取数据

可以通过浏览器的LocalStorage来获取存储的数据。例如：

const value = localStorage.getItem('key');
console.log(value); // 输出：Hello, LocalStorage

总结

获取Vue组件中的值可以通过多种方式实现，包括使用事件机制、通过Vue的实例方法、使用Vuex进行状态管理、通过props和$emit进行父子组件通信、使用全局事件总线（Event Bus）、借助浏览器的LocalStorage或SessionStorage等方法。每种方法都有其适用的场景和优缺点，开发者可以根据具体需求选择最合适的方法进行实现。为了更好地理解和应用这些方法，建议在实际项目中多加练习和实践，从而掌握Vue组件间数据传递和通信的技巧。