データ変更を監視する

Question

現在、私はVueインスタンスのコンセプトに苦しんでいます。 web-packで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'でコンポーネントをインポートすることもできます。パスは異なる場合があります。

これで、を使用してコンポーネントを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 
    } 
    } 
} 

は、だから、基本的にそれです！ 少し長かったら申し訳ありませんが、私があなたを助けてくれることを願っています;）

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が混在しているからです。