2

我不确定我是否正确执行此操作。请看一下这个简单的 Vue 组件Test.vue：

<template>
    <div>
        Hi from {{name}}
    </div>
</template>

<script>
    let self;

    export default {
        created: function () {
            self = this;
        },
        methods: {
            load() {
                ajax().then((obj) => self.name = obj.data);
            }
        },
        data() {
            return {
                name: 'one',
            }
        }
    }
</script>

如您所见，我将 this 的引用保存到一个名为的变量中，self因为 lambda 函数的值发生了this变化，例如ajax().then((obj) => self.name = obj.data);

我的问题是，当创建另一个组件实例时，它会覆盖self前一个实例中的值。因此，例如，如果我有两个<test id="1"></test>， <test id="2"></test>然后后面的组件覆盖self第一个的变量（同样发生v-for）。

所以我的问题是如何创建self保存到this每个实例的值并且不会被覆盖的变量？

编辑：是的，我知道我可以self = this在每个函数中做，但这只是一个简单的例子，只有一种方法。在我的实际组件中，我不想self = this在每个函数中都执行 20 多个函数。这就是为什么我可以创建一个变量，我可以在create调用期间分配一次并在任何地方使用它（就像我们过去使用that变量一样）。

4

1 回答 1

4

你试图做的大多是不必要的。

确实，thisJavaScript 中的值有时会令人困惑。不过，这也是一个众所周知的问题，也有众所周知的解决方案。

而这些解决方案，至少在与 Vue 实例相关的问题上，是：

但是不要相信我，让我们来看一个例子。获取您的源代码：

    methods: {
        load() {
            ajax().then((obj) => self.name = obj.data);
        }
    },

作为参数，.then()您必须传递一个函数。this此类函数内部的值将取决于您如何传递它。

在第一种情况下（上述两个解决方案中的第一个解决方案），应该使用箭头函数（您已经这样做了）。因此，在您的代码中，self是不必要的，因为this箭头函数内部仍将指向 Vue 实例。

    methods: {
        load() {
            console.log(this.name);
            ajax().then((obj) => this.name = obj.data);
        }
    },

在上面的示例中，两者都this.name引用相同的属性。请参阅下面的演示。

const ajax = () => {
	return fetch('https://api.myjson.com/bins/18gqg9')
  	  .then((response) => response.json())
};

new Vue({
  el: '#app',
  data: {
		name: 'Alice'
  },
  methods: {
    yoo() {
      console.log('outside:', this.name);
      ajax().then((obj) => { this.name = obj.name; console.log('inside arrow, after change:', this.name); });
    }
  }
})
<script src="https://unpkg.com/vue@latest/dist/vue.min.js"></script>
<div id="app">
  <p>
    name: {{ name }}
  </p>
  <button @click="yoo">AJAX!</button>
  
  <p>Click the button above and check the console. The printed name variable is the same.</p>
</div>

现在，在第二种解决方案中，您将使用常规（非箭头）函数。但要确保this保留 ，您将使用.bind(this)，如下所示：

    methods: {
        load() {
            console.log(this.name);
            ajax().then(function (obj) { this.name = obj.data }.bind(this));
        }
    },

与前一种情况类似，在两个地方都this.name指的是同一个属性。请参阅下面的演示。

const ajax = () => {
	return fetch('https://api.myjson.com/bins/18gqg9')
  	  .then((response) => response.json())
};

new Vue({
  el: '#app',
  data: {
		name: 'Alice'
  },
  methods: {
    yoo() {
      console.log('outside:', this.name);
      ajax().then(function(obj) { this.name = obj.name; console.log('inside arrow, after change:', this.name); }.bind(this));
    }
  }
})
<script src="https://unpkg.com/vue@latest/dist/vue.min.js"></script>
<div id="app">
  <p>
    name: {{ name }}
  </p>
  <button @click="yoo">AJAX!</button>
  
  <p>Click the button above and check the console. The printed name variable is the same.</p>
</div>

因此，如您所见，在 Vue 实例中，此类self变量的声明是不必要的。

于 2018-03-22T00:32:59.207 回答