时间戳

首页 > 解决方案 > vuejs - .bind(this) 没有按预期工作

javascript - vuejs - .bind(this) 没有按预期工作

问题描述

演示：https ://codesandbox.io/s/23959y5wnp

所以我正在传递一个函数并想重新绑定this我.bind(this)在函数上使用的所以返回的数据仍然基于原始组件。我错过了什么？

预期： 应在按钮单击Test2时打印出来Test2

代码：

应用程序.vue

<template>
  <div id="app">
    <img width="25%" src="./assets/logo.png" /><br />
    <Test1 :aFunction="passThis" /> <Test2 :aFunction="dontPassThis" />
  </div>
</template>

<script>
import Test1 from "./components/Test1";
import Test2 from "./components/Test2";

export default {
  name: "App",
  components: {
    Test1,
    Test2
  },
  data() {
    return {
      value: "original"
    };
  },
  methods: {
    dontPassThis($_) {
      console.log(this.value);
    },
    passThis($_) {
      console.log($_.value);
    }
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

测试1.vue

<template>
  <div>Test1 <button @click="() => aFunction(this)">click me</button></div>
</template>

<script>
export default {
  data() {
    return {
      value: "Test1"
    };
  },
  mounted() {
    this.aFunction(this);
  },
  props: {
    aFunction: {
      required: true,
      type: Function
    }
  }
};
</script>

测试2.vue

<template>
  <div>
    Test2

    <button @click="testFunction">click me</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      testFunction: null,
      value: "Test2"
    };
  },
  created() {
    this.testFunction = this.aFunction.bind(this);
  },
  props: {
    aFunction: {
      required: true,
      type: Function
    }
  }
};
</script>

标签： javascriptvue.jsvuejs2

解决方案

Vue在初始化的时候已经绑定了组件的方法， 函数不能绑定多次（后续绑定没有效果）。

所以当App被初始化时，Vue 将App实例绑定为其dontPassThis方法的上下文。通过一个道具App“传递”dontPassThis到，该道具随后尝试绑定，实际上什么都不做。Test2Test2

推荐阅读