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

使用data。

var externalVar = "hello world"

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

这样您可以像this.$data.variableToPass

那样访问您的变量

Answer 2

使用$options 在子组件中

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

Answer 3

如果我理解正确，您希望使用props将数据传递给子组件

使用:variable="variableToPass"

动态绑定子组件元素上的prop属性

var externalVar = "hello world"

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

});

在子组件中定义道具选项

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

Vue.js：通过初始化将外部变量传递给组件？

3 个答案: