CODEWITHSUNDEEP
javascriptvue.js
Bénédicte Lagouge
Bénédicte Lagouge

Reputation: 492

Vue.js : Passing an external variable to a component through initialization?

I am trying to pass a variable (here, externalVar) to a component, directly when initializing. But I can't find how to do it (probably not understanding documentation well :/ ). What is the correct way to do it?

The initialization : 

var externalVar = "hello world"

const leftmenu = new Vue({
    el: "#left-menu",
    template: "<CLM/>",
    components: {CLM},
    variableToPass: externalVar
});

The component I am initializing here is defined like this (getting back variableToPass in data):

<template src="./template-l-m.html"></template>

<script>
import draggable from 'vuedraggable';
export default {
    name: 'leftmenu',
    components: {
        draggable
    },

    data () {
        return {
            jsonObject: this.variableToPass,
        }
    },
[ ... ]
</script>

But then , when I am trying to use this.jsonObject, it says that it's undefined. What am I doing wrong ?

Upvotes: 1

Views: 6571

Answers (3)

Andrii Kudriavtsev
Andrii Kudriavtsev

Reputation: 1304

Use $options in child component

  mounted() {
    console.log(this.$parent.$options.variableToPass) // hello world
    this.jsonObject = this.$parent.$options.variableToPass
  }

Upvotes: 0

Ruslan Adaev
Ruslan Adaev

Reputation: 21

Use data.

var externalVar = "hello world"

const leftmenu = new Vue({
    el: "#left-menu",
    template: "<CLM/>",
    components: {CLM},
    data: {
        variableToPass: externalVar
    }
});

That way you can access your variable like this this.$data.variableToPass

Upvotes: 2

Vamsi Krishna
Vamsi Krishna

Reputation: 31352

If i understand you correctly you want to use props to pass data to child components

Dynamically bind a prop attribute on child component element using :variable="variableToPass"

var externalVar = "hello world"

const leftmenu = new Vue({
    el: "#left-menu",
    template: "<CLM :variable='variableToPass'/>",
    components: {CLM},
    data: {
        variableToPass: externalVar
    }
    
});

Define a props option in the child component

<template src="./template-l-m.html"></template>

<script>
import draggable from 'vuedraggable';
export default {
    name: 'leftmenu',
    components: {
        draggable
    },
    props: ['variable'],
    data () {
        return {
            jsonObject: this.variable,
        }
    },
[ ... ]
</script>

Upvotes: 2

Related Questions