Как инициализировать приложение с данными в 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:

<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, отличающиеся только по своему содержанию.

В то время как документация сосредоточена на отдельных файловых компонентах, кажется,монолитное одностраничное приложение, это не то, что мне было нужно.

Answer 2

Разрешение

Если вам необходимо использовать данные приложения Vue верхнего уровня, вы можете сделать это с помощью $parent или $root.Затем вы можете использовать $data этого экземпляра Vue для доступа к его данным.Вот документ экземпляра Vue.

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

Вы можете увидеть живоекод здесь .

Подробнее

Но это не рекомендуемый способ.Если вы хотите передать данные в дочерний компонент, вы можете использовать props.Если вам не нравятся реквизиты, вы можете использовать Vuex , чтобы создать глобальное хранилище данных, в которое можно поместить параметры верхнего уровня.

Answer 3

Foo.vue:

add 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

add 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'/>"
});