Vue：Vueインスタンスからのコンポーネントデータの更新

Question

Vueインスタンスからコンポーネント内のデータを更新したいとします。反対のことを行う方法の例がたくさんあるが、これについては何も見つからない。

は、私が持っていると言う：

Vue.component('component', { 
props: { 
    prop: { 
     default: null 
    } 
}, 
template: '#template', 
data: function() { 
    return { 
     open: false 
    }; 
} 
}); 

今、私は私のVueのインスタンスからtrueにopenを設定したいと思います：

var root = new Vue({ 
    el: '#root', 
    data: {}, 
    methods: { updateComponentData: function() {//set open to true} } }); 

Answer 1

あなたは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 
    } 
    } 
}); 

---

の作業例

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>

Answer 2

私はちょうどあなたのコードで演奏し、以下のコードはそれを試すようにしてください完璧に動作します。私はVue 'ref'を使っています。コンポーネントにref属性を追加し、親から特定のコンポーネントデータにアクセスできます。

Vue.component('component', { 
 
    props: { 
 
     prop: { 
 
      default: null 
 
     } 
 
    }, 
 
    template: '#template', 
 
    data:() => ({ 
 
     open: false 
 
    }) 
 
}); 
 
var root = new Vue({ 
 
    el: '#root', 
 
    data:() => ({}), 
 
    methods: { 
 
     updateComponentData: function() { 
 
\t \t \t  this.$refs.myComponent.open = true 
 
     } 
 
    }, 
 
});

<script src="https://unpkg.com/vue"></script> 
 
<div id="root"> 
 
\t <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>