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}在您的Vue实例中注册您的组件。

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

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

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

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

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
    }
  }
}

基本上就是这样！对不起，如果这有点长，但我希望我可以帮助你;）

Answer 2

这实际上是我必须要做的。

const Search = Vue.extend(Search);
const vm = new Search({el: 'search'});

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

现在，我可以从.vue文件外部查看属性的更改。这是一个问题，因为我混合了.js和precompile .vue和vue-loader。

留意数据变化

2 个答案: