Vue函数实现

Vue 函数实现的基本方法

在 Vue 中，函数通常作为方法（methods）定义，用于处理组件内的逻辑。以下是一个简单的 Vue 函数实现示例：

export default {
  methods: {
    greet() {
      console.log('Hello, Vue!');
    }
  }
}

在模板中调用函数

Vue 函数可以在模板中直接调用，通常通过事件绑定触发：

<template>
  <button @click="greet">Click me</button>
</template>

带参数的函数实现

Vue 函数可以接收参数，并在模板中传递：

export default {
  methods: {
    greet(name) {
      console.log(`Hello, ${name}!`);
    }
  }
}

模板中传递参数：

<button @click="greet('John')">Greet John</button>

计算属性 vs 方法

对于需要缓存结果的场景，可以使用计算属性（computed）而非方法：

export default {
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
  }
}

异步函数实现

Vue 组件中可以定义异步函数：

export default {
  methods: {
    async fetchData() {
      try {
        const response = await axios.get('/api/data');
        this.data = response.data;
      } catch (error) {
        console.error(error);
      }
    }
  }
}

生命周期钩子中的函数

可以在生命周期钩子中调用函数：

export default {
  created() {
    this.initialize();
  },
  methods: {
    initialize() {
      // 初始化逻辑
    }
  }
}

函数绑定 this

确保函数中正确绑定 Vue 实例的 this：

export default {
  methods: {
    handleClick: function() {
      // 这里的 this 指向 Vue 实例
      console.log(this.message);
    }
  }
}

函数作为 prop 传递

父组件可以通过 prop 将函数传递给子组件：

// 父组件
<ChildComponent :callback="parentFunction" />

// 子组件
export default {
  props: ['callback'],
  mounted() {
    this.callback();
  }
}

事件发射函数

子组件可以通过 $emit 触发父组件的函数：

// 子组件
this.$emit('custom-event', data);

// 父组件
<ChildComponent @custom-event="handleEvent" />