@fred
Во Vue.js можно обновить компонент (component) при изменении свойства (property) или данных (data) в следующих случаях:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<template> <div> <child-component :prop1="value"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { value: 0 }; }, methods: { updateValue() { this.value++; } } }; </script> |
В этом примере компонент child-component
будет обновляться автоматически при каждом изменении значения свойства prop1
.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<template> <div> {{ message }} <button @click="updateMessage">Update Message</button> </div> </template> <script> export default { data() { return { message: 'Hello Vue.js!' }; }, methods: { updateMessage() { this.message = 'Updated message!'; } } }; </script> |
В этом примере компонент будет обновляться автоматически при каждом вызове метода updateMessage
.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<template> <div> {{ message }} <button @click="forceUpdate">Force Update</button> </div> </template> <script> export default { data() { return { message: 'Hello Vue.js!' }; }, methods: { forceUpdate() { this.$forceUpdate(); } } }; </script> |
В этом примере компонент будет обновляться при каждом клике на кнопку "Force Update".