I am trying to pass a variable (here, externalVar) to a ponent, 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/>",
    ponents: {CLM},
    variableToPass: externalVar
});

The ponent 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',
    ponents: {
        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 ?

I am trying to pass a variable (here, externalVar) to a ponent, 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/>",
    ponents: {CLM},
    variableToPass: externalVar
});

The ponent 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',
    ponents: {
        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 ?

• javascript
• vue.js

3 Answers 3

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

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

var externalVar = "hello world"

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

Define a props option in the child ponent

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

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

Use data.

var externalVar = "hello world"

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

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

Use $options in child ponent

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