Vue.js 在mounted钩子中访问数据

在本文中，我们将介绍如何在Vue.js中的mounted钩子中访问数据。mounted钩子是Vue.js生命周期的一个阶段，在该阶段，Vue实例已经被创建，但还没有挂载到DOM上。我们可以在mounted钩子中执行一些初始化的操作，例如获取数据、订阅事件等。

阅读更多：Vue.js 教程

访问数据

在mounted钩子中，我们可以通过this关键字访问Vue实例的数据。Vue实例的data对象中定义了一些响应式的数据，我们可以通过this.dataKey的方式获取或修改这些数据。下面是一个示例：

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  mounted() {
    console.log(this.message); // 输出：Hello Vue!
    this.message = 'Hello World!'; // 修改数据
  }
});

在上面的示例中，通过this.message可以访问到Vue实例中的message数据，并输出到控制台。在mounted钩子中，我们还可以修改数据，例如将message的值修改为’Hello World!’。

访问子组件的数据

在Vue.js中，我们可以通过ref属性来引用子组件，并访问子组件的数据。在mounted钩子中，子组件的数据已经初始化完毕，我们可以通过this.$refs来访问子组件的引用。下面是一个示例：

Vue.component('child-component', {
  template: '<div>{{ message }}</div>',
  data() {
    return {
      message: 'Hello Vue child component!'
    };
  }
});

new Vue({
  el: '#app',
  mounted() {
    console.log(this.$refs.child.message); // 输出：Hello Vue child component!
  }
});

在上面的示例中，通过this.$refs.child可以访问到子组件的引用，并通过child.message访问到子组件的message数据。

异步请求数据

在mounted钩子中，我们还可以通过异步请求来获取数据。使用Vue.js的官方插件vue-resource可以很方便地发送异步请求。下面是一个示例：

new Vue({
  el: '#app',
  mounted() {
    this.$http.get('/api/data')
      .then(response => {
        console.log(response.data); // 输出异步请求返回的数据
      });
  }
});

在上面的示例中，通过this.$http.get可以发送一个GET请求，并在then中处理返回的数据。