Vue JSの親コンポーネントから子コンポーネントに更新された値を送信するにはどうすればよいですか？

Question

親コンポーネントから子コンポーネントに変数を渡しています。しかし、いくつかの操作では、その変数の値が変更されています。つまり、親コンポーネントの一部のボタンをクリックするだけですが、その更新された値を子に渡す方法はわかりませんでしたか？ある変数の値が最初はfalseで、親コンポーネントにEditボタンがあるとします。編集ボタンをクリックするとこの変数の値が変更され、更新された値が親コンポーネントから子コンポーネントに渡されます。

Answer 1

vue watchで（小道具）変数を見ることができます。例えば

：

<script> 
export default { 
    props: ['chatrooms', 'newmessage'], 
    watch : { 
    newmessage : function (value) {...} 
    }, 
    created() { 
    ... 
    } 
} 
</script> 

私は、これはあなたの問題を解決することを願っています。あなたが望むように、これは、子コンポーネントに親から動的にデータを渡しますDynamic Props.

:)

Answer 2

あなたは使用することができます。

Answer 3

親コンポーネントと子コンポーネントの間で小道具を使用するときは、プロパティの値を動的に更新する必要があります。あなたの例とfalseのプロパティの初期状態に基づいて、値が子コンポーネントに正しく渡されなかった可能性があります。構文が正しいことを確認してください。参考までにhereを確認することができます。

ただし、プロパティの値が変更されるたびに一連のアクションを実行する場合は、watcherを使用できます。

EDIT：

ここ両方小道具やウォッチャー使用例を示します

HTML

<div id="app"> 
    <child-component :title="name"></child-component> 
</div> 

はJavaScript

Vue.component('child-component', { 
    props: ['title'], 
    watch: { 
    // This would be called anytime the value of title changes 
    title(newValue, oldValue) { 
     // you can do anything here with the new value or old/previous value 
    } 
    } 
}); 

var app = new Vue({ 
    el: '#app', 
    data: { 
    name: 'Bob' 
    }, 
    created() { 
    // changing the value after a period of time would propagate to the child 
    setTimeout(() => { this.name = 'John' }, 2000); 
    }, 
    watch: { 
    // You can also set up a watcher for name here if you like 
    name() { ... } 
    } 
});