手錶數據改變

我目前正在與Vue的實例概念掙扎。我使用VUE，裝載機的WebPack並創建了我導入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) 
});

指數也在要使用的組件內部不可用。

我該如何解決這個問題？

來源

2017-09-05 jpsc

您可以輕鬆地在這裏使用觀察家。但首先，讓我告訴你如何在組件中使用數據。所以基本上，如果你在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>，該標記將呈現您在組件內定義的任何內容！

現在你只是你的值綁定到，然後將其傳遞給您的組件，像這樣的道具：<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 
    } 
    } 
}

所以這基本上是它！很抱歉，如果這是一個有點長，但我希望我能幫助你;）

來源

2017-09-05 09:47:53 fweidemann14

非常感謝長和描述性的答案。非常感謝。這很有幫助，但我的問題與vue實例有關。當你到這.vue文件組件它已被初始化。我想清楚了，會在答案後發佈。 – jpsc

尼斯，極大地聽。） – fweidemann14

其實，這是我必須做的。

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

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

現在我可以看到.vue文件之外的屬性更改。這是一個問題，因爲我有.js文件的混合和預編譯.vue與VUE裝載機。

來源

2017-09-05 10:09:05 jpsc

手錶數據改變

回答

相關問題