觀察數據變化

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://v2.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 屬性，像這樣： 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 實例中定義的 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
    }
  }
}

所以基本上就是這樣！ 對不起，如果這有點長，但我希望我能幫助你；）

Answer 2

這實際上是我必須做的。

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

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

現在我可以從 .vue 文件外部觀察屬性的變化。 這是一個問題，因為我混合了 .js 和使用 vue-loader 預編譯 .vue。