Je souhaite mettre à jour les données d'un composant à partir de mon instance Vue. Trouver beaucoup d'exemples sur la façon de faire le contraire, mais rien à ce sujet.
Dis que j'ai:
Vue.component('component', {
props: {
prop: {
default: null
}
},
template: '#template',
data: function () {
return {
open: false
};
}
});
Maintenant, j'aimerais définir open
sur true
à partir de mon instance Vue:
var root = new Vue({
el: '#root',
data: {},
methods: { updateComponentData: function() {//set open to true} } });
Vous devriez pouvoir le faire avec Child Component Ref .
<script type="text/x-template" id="template" ref="component">
<div>Hello, {{ name }}!</div>
</script>
var root = new Vue({
el: '#root',
data: {},
methods: {
updateComponentData: function() {
this.$refs.component.open = true
}
}
});
Exemple de travail
const Child = Vue.component('child', {
template: `
<div>
<h2>Component1</h2>
<div>Hello, {{ title }}! <strong>{{ open }}<strong></div>
</div>
`,
data() {
return {
title: 'component',
open: false
}
}
});
var root = new Vue({
el: '#app',
components: {
Child
},
methods: {
updateComponentData: function() {
//console.log('updateComponentData', this.$refs)
this.$refs.component1.open = true
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<div id="app">
<h2>Parent</h2>
<button v-on:click="updateComponentData">Click me true</button>
<child ref="component1"></child>
</div>
Je viens de jouer avec votre code et les codes suivants fonctionnent parfaitement s'il vous plaît essayez-le. J'ai utilisé Vue 'ref'. Ajoutez l'attribut ref
dans votre composant pour pouvoir accéder aux données de ce composant spécifique à partir du parent.
Vue.component('component', {
props: {
prop: {
default: null
}
},
template: '#template',
data: () => ({
open: false
})
});
var root = new Vue({
el: '#root',
data: () => ({}),
methods: {
updateComponentData: function() {
this.$refs.myComponent.open = true
}
},
});
<script src="https://unpkg.com/vue"></script>
<div id="root">
<button @click="updateComponentData">Change</button>
<hr>
<component ref='myComponent'></component>
</div>
<script type="text/x-template" id="template" ref="component">
<div>Open: {{ open }}!</div>
</script>