如何将数据从 Vue 实例传递到 Vue.component？答案

【问题标题】：How to passing data from Vue instance into a Vue.component?如何将数据从 Vue 实例传递到 Vue.component？
【发布时间】：2017-12-04 15:58:51
【问题描述】：

我有一个包含两个组件的 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>

使用此脚本代码：

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;
        },
    },
});

如果单击按钮，则可以将信息从组件传递到实例。但是这里正在停止数据流，mycomp-one 组件没有得到更改。我该如何解决？如果活动为真，我想隐藏mycomp-one。

【问题讨论】：

标签： vue.js vuejs2 vue-component

【解决方案1】：

this.$parent.$options.methods.setActive() 不是绑定到 Vue 的方法。我不确定您是如何到达这里的，但这不是您在父级上调用方法的方式。

console.clear()
Vue.component('mycomp-one', {
    props:["active"],
    template: '#mycomponent-one',
});
Vue.component('mycomp-two', {
    template: '#mycomponent-two',
    data: function() {
        return {
            active: false
        };
    },
    methods: {
        setActive: function() {
            this.$parent.setActive();
        },
    },
});
new Vue({
    el:'#app',
    data:{
        active: false
    },
    methods: {
        setActive: function() {
            this.active = !this.active;
        },
    },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
<div id="app">
    <mycomp-one :active="active"></mycomp-one>
    <mycomp-two></mycomp-two>
</div>

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

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

除此之外，组件不应调用其父级的方法。他们应该发出父母收听的事件。 documentation 对此进行了很好的介绍。

console.clear()
Vue.component('mycomp-one', {
    props:["active"],
    template: '#mycomponent-one',
});
Vue.component('mycomp-two', {
    template: '#mycomponent-two',
    data: function() {
        return {
            active: false
        };
    },
    methods: {
        setActive: function() {
            this.active = !this.active
            this.$emit("set-active", this.active)
        },
    },
});
new Vue({
    el:'#app',
    data:{
        active: false
    },
    methods: {
        setActive: function() {
            this.active = !this.active;
        },
    },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
<div id="app">
    <mycomp-one :active="active"></mycomp-one>
    <mycomp-two @set-active="active = $event"></mycomp-two>
</div>

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

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

【讨论】：