[Vuejs]-How to passing data from Vue instance into a Vue.component?

by

2👍

✅

this.$parent.$options.methods.setActive() is not a method bound to the Vue. I’m not sure how you got here, but this is not how you call a method on the parent.

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>

Beyond that, components shouldn’t call methods on their parent. They should emit events the parent listens to. This is covered well in the 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>
👤Bert

Leave a comment