Vue.js 如何将数据从Vue实例传递到Vue.com组件？

我有一个包含两个组件的Vue实例。如果用户单击第二个组件中的按钮，我想隐藏第一个组件的模板

我有以下代码：

<div id="app">
    <mycomp-one :active="active"></mycomp-one>
    <mycomp-two></mycomp-two>
</div>

<template id="mycomponent-one">
    <div v-show="!active">
        <!-- ... --->
    </div>
</template>

<template id="mycomponent-two">
    <button v-on:click="setActive">Click Me</button>
</template>

---

如果单击该按钮，则可以将信息从组件传递到实例。但是这里正在停止数据流，

mycopone

组件没有得到更改。我怎样才能解决这个问题？如果活动为true，我想隐藏mycomp one。

此。$parent.$options.methods.setActive（）

不是绑定到Vue的方法。我不知道你是怎么来的，但这不是你在父对象上调用方法的方式

console.clear（）
Vue.组件（'mycomp-one'{
道具：[“活动”]，
模板：“#mycomponent one”，
});
Vue.组件（'mycomp-two'{
模板：'#mycomponent二'，
数据：函数（）{
返回{
活动：错误
};
},
方法：{
setActive:函数（）{
这是。$parent.setActive（）；
},
},
});
新Vue({
el:“#应用程序”，
数据：{
活动：错误
},
方法：{
setActive:函数（）{
this.active=！this.active；
},
},
});

东西
点击我
此.$parent.$options.methods.setActive（）
不是绑定到Vue的方法。我不知道你是怎么来的，但这不是你在父对象上调用方法的方式


console.clear（）
Vue.组件（'mycomp-one'{
道具：[“活动”]，
模板：“#mycomponent one”，
});
Vue.组件（'mycomp-two'{
模板：'#mycomponent二'，
数据：函数（）{
返回{
活动：错误
};
},
方法：{
setActive:函数（）{
这是。$parent.setActive（）；
},
},
});
新Vue({
el:“#应用程序”，
数据：{
活动：错误
},
方法：{
setActive:函数（）{
this.active=！this.active；
},
},
});

东西
点击我

Vue.component('mycomp-one', {
    template: '#mycompnent-one',
    // etc...
});
Vue.component('mycomp-two', {
    template: '#mycomponent-two',
    data: function() {
        return {
            active: false
        };
    },
    methods: {
        setActive: function() {
            this.$parent.$options.methods.setActive();
        },
    },
});
new Vue({
    el:'#app',
    data:{
        active: false
    },
    methods: {
        setActive: function() {
            this.active = !this.active;
        },
    },
});