如何將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？

回答

相關問題