观察数据变化

Question

我目前正在为 Vue 实例概念而苦苦挣扎。我正在使用带有 webpack 的 vue-loader 并创建了一个我正在导入的 vue 组件。

import Vue from 'vue';
import Search from '../Search.vue';
const vm = new Vue({
   el: 'search',
   render: h => h(search)
});

在组件上：

export default {
    data: function() {
        return {
            results: 'current results'
        }
    }
}

我想要来自组件内部的触发器和事件（在属性更改时），我可以从实例中观察它们。

使用 API 应该是这样的：

vm.$watch('results', function (newVal, oldVal) {
  // do something
})

但我没有触发任何东西。

我想我不知道如何使用 Vue 实例，因为我也不能添加任何可在组件上访问的实例初始化数据，例如：

const vm = new Vue({
   el: 'search',
   data: {index: 1},
   render: h => h(search)
});

索引在组件内部也不可用。

我该如何解决？

Answer 1

您可以在此处轻松使用观察者。但首先，让我向您展示如何在组件内部使用数据。所以基本上，如果你在 Vue 实例中定义数据，你就可以在那里使用它们。但是您想将它们传递给您的组件。这就是props派上用场的地方。

https://vuejs.org/v2/guide/components.html#Props

基本上，这里的重要部分是你有一个像你这样的孩子......

export default {
  data: function() {
    return {
        results: 'current results'
    }
  }
}

...并且您希望在其中使用某种价值，该价值应该来自外部。因此，您可以通过添加以下内容来定义您期望为组件提供的内容props：

export default {
  props: ['index'],
  data: function() {
    return {
        results: 'current results'
    }
  }
}

现在，您只需在使用它时将其传递给您的组件。假设您为组件提供了一个名称属性，如下所示：name: test-element并且您的组件位于一个名为的自己的文件中TestElement.vue- 显然您可以将其更改为您想要的任何内容，但现在让我们坚持使用它。

然后您可以将您的组件导入到您的父组件中import TestElement from './TestElement.vue'- 同样，您的路径可能会有所不同！

现在，您使用components: {'test-element': TestElement}.

这使您可以<test-element>在当前文件中使用 HTML 标记，然后将呈现您在组件中定义的任何内容！

现在，您只需将您的值绑定到 prop，然后将其传递给您的组件，如下所示： <test-element :index="index"></test-element>

就是这样！现在，在您的父组件的 Vue 实例中定义的 index 值正在传递给您的子组件，您可以在其中使用它，例如在您的模板中，进行计算，无论您想要什么！

现在你关于观察者的问题：在你的组件内部，像这样注册一个观察者......

export default {
  props: ['index'],
  data: function() {
    return {
      results: 'current results',
      index: this.index // here we are using your prop!
    }
  },
  watch: {
    index: function (newValue, oldValue) {
      // here you can do whatever you want
    }
  }
}

所以基本上就是这样！对不起，如果这有点长，但我希望我能帮到你；）