Question

我正在使用一个名为Foo的文件组件：

<template>
<div>
  This is the app. X  is {{ x }}, y is {{ y }}
</div>
</template>
<script>
export default {
  data() {
   return { x: 'hello x' };
  },
}
</script>

我正在初始化我的应用程序，例如：

// somewhere here 'node' gets set to a DOM node,
// and 'y' is created.
import Vue from 'vue';
import Foo from './Foo.vue';
const app = new Vue({             
  'el': node,                     
  data: {y},
  render: h => h(Foo)             
});

这是一个过分的简化，因为“ y”实际上是一个对象，而不仅仅是一个简单的字符串。如果那样的话。

我知道如何将道具等传递给子组件，但我正在努力将主要配置数据导入顶级Vue应用！

Answer 1

Foo.vue：

添加props:['y']

<template>
<div>
  This is the app. X  is {{ x }}, y is {{ y }}
</div>
</template>
<script>
  export default {
  props:['y']
    data() {
      return {
        x: 'hello x'
      };
    },
  }
</script>

main.js

将template:'<Foo :y="y"'/>添加到vue实例，并且node应该是有效的html元素

// somewhere here 'node' gets set to a DOM node,
// and 'y' is created.
import Vue from 'vue';
import Foo from './Foo.vue';
const app = new Vue({
  'el': node,
  data: {
    y: "some content"
  },
  template: "<Foo :y='y'/>"
});

Answer 2

这就是我的做法。

在Foo.vue中添加props：

<template>
<div>
  This is the app. X  is {{ x }}, y is {{ y }}
</div>
</template>
<script>
export default {
  data() {return { x: 'hello x' };},
  props: [ 'y' ],
}
</script>

然后在创建应用程序的主要js中：

// somewhere here 'node' gets set to a DOM node,
// and 'y' is created.
import Vue from 'vue';
import Foo from './Foo.vue';
const app = new Vue({             
  'el': node,
  render: h => h(Foo, {props: {y})
});

通过这种方式，y可以作为道具传递，但是无需诉诸使用template，这需要包含编译器的Vue较重构建。

这样做的好处是，我的CMS可以吐出应该是Vue应用程序的页面块，可以包含每个应用程序的配置，还可以创建所有仅在内容上有所不同的Vue应用程序。 / p>

虽然文档重点放在单个文件组件上似乎是一个整体的单页应用程序，但这不是我所需要的。

Answer 3

分辨率

如果必须使用顶级Vue应用程序的数据，则可以使用$parent或$root进行创建。然后，您可以使用该Vue实例的$data来访问其数据。这是Vue实例的document。

使用$parent，您将获得一个组件父级的Vue实例。

this.$parent.$data.y

使用$root，您将获得当前组件树的根Vue实例。

this.$root.$data.y

所以 Foo.vue 会像这样：

<template>
  <div>This is the app. X is {{ x }}, y is {{ y }}</div>
</template>

<script>
export default {
  data: function() {
    return { x: "x" };
  },
  computed: {
    y: function() {
      return this.$parent.$data.y;
    }
  }
};
</script>

您可以看到实时代码here。

如何使用Vue.js中的数据初始化应用

3 个答案:

分辨率

更多