你应该能用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
}
}
});
Working example
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>