Vue中在data里面调用method方法的实现

在Vue中，我们可以在组件的data选项中定义数据，并且我们可以使用methods来定义方法。通常情况下，我们使用methods中的方法来操作组件数据。但是，有时我们需要在data中调用methods的方法。这时，可以使用this.$options.methods来访问methods中定义的方法。

下面是Vue中在data里面调用method方法的实现的完整攻略：

在Vue组件中定义data和method

<template>
  <div>
    <p> {{message}} </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "Tom",
      age: "18",
    };
  },
  methods: {
    showMessage() {
      alert(`My name is ${this.name} and I am ${this.age} years old!`);
    },
  },
};
</script>

在这个例子中，我们定义了一个data选项，包含了一个名为name和age的数据。我们也定义了一个methods选项，包含了一个名为showMessage的方法，在方法中弹出一个含有name和age数据的对话框。

在Vue组件的data选项中调用method方法

<template>
  <div>
    <p> {{message}} </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "Tom",
      age: "18",
      message: this.showMessage(),
    };
  },
  methods: {
    showMessage() {
      return `My name is ${this.name} and I am ${this.age} years old!`;
    },
  },
};
</script>

在这个例子中，我们在data选项中定义了一个message变量，并用showMessage方法来设置它的值。值得注意的是，在定义message变量时，我们调用了showMessage方法。

这样，在渲染Vue组件时，Vue会执行showMessage方法来获取message的值，因为我们已经把showMessage方法绑定到了data选项中的message属性。

对上述例子进行改动

我们稍微修改一下上述的代码，将showMessage方法中的alert改为console.log，同时将message变量中的值直接改为模板字符串的形式。

<template>
  <div>
    <p> {{message}} </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "Tom",
      age: "18",
      message: "",
    };
  },
  methods: {
    showMessage() {
      return `My name is ${this.name} and I am ${this.age} years old!`;
    },
  },
  mounted() {
    this.message = this.showMessage();
    console.log(this.message);
  },
};
</script>

在这次修改中，我们使用mounted钩子来在组件渲染后执行showMessage方法，并使用console.log方法打印出message变量中的值。

这次我们将showMessage放到mounted钩子中，并使用this.message来获取showMessage方法的返回值，而不是像之前一样直接在data选项中调用showMessage方法。

总结：

Vue中在data里面调用method方法有以下几个关键点：