如何将Vue实例中的数据传递给Vue.component？

我有一个包含两个组件的Vue实例。如果用户点击第二个组件中的按钮，我想隐藏第一个组件的模板。如何将Vue实例中的数据传递给Vue.component？

我有这样的代码：

<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。

来源

2017-06-30 netdjw

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>

来源

2017-06-30 16:23:55 Bert

如何将Vue实例中的数据传递给Vue.component？

回答

相关问题