Vue.js：通過初始化將外部變量傳遞給組件？

Question

我試圖在初始化時直接將變量（此處為 externalVar）傳遞給組件。 但我找不到怎么做（可能不太了解文檔：/）。 正確的方法是什么？

初始化：

var externalVar = "hello world"

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

我在這里初始化的組件是這樣定義的（在數據中取回 variableToPass）：

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

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

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

但是，當我嘗試使用 this.jsonObject 時，它說它是未定義的。 我究竟做錯了什么 ？

Answer 1

使用數據。

var externalVar = "hello world"

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

這樣你就可以像this.$data.variableToPass這樣訪問你的變量

Answer 2

如果我理解正確，您想使用道具將數據傳遞給子組件

使用:variable="variableToPass"在子組件元素上動態綁定 prop 屬性

var externalVar = "hello world"

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

在子組件中定義一個 props 選項

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

Answer 3

在子組件中使用$options

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