如何使用 vuejs 中的数据初始化应用程序

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>

ma​​in.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 作为 props 传入，但无需使用 template，这需要更重的包含编译器的 Vue 构建。

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

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

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。

更多

但这不是推荐的方式。如果要将数据传递给子组件，可以使用props。如果你不喜欢 props，你可以使用Vuex 来创建一个全局数据存储来放置你的顶级选项。