Компонент приложения Init с реквизитом с использованием VueJs - PullRequest
Новая
       21

Компонент приложения Init с реквизитом с использованием VueJs

0 голосов
/ 08 июня 2018

Я использую VueJs с VueCli, и я хотел бы загрузить файл CSS в соответствии с параметром «source», который будет передан для инициации моего основного компонента приложения.

Я хотел бы инициализировать мойтакой компонент в индексном файле: Main.js: 

import Vue from 'vue'
import App from './App'
import router from './router'
import VueLadda from 'vue-ladda'
import VueResource from 'vue-resource'
import VModal from 'vue-js-modal'
import BootstrapVue from 'bootstrap-vue'

Vue.use(VModal);
Vue.use(BootstrapVue);

Vue.use(VueResource);
Vue.config.productionTip = false
Vue.component('vue-ladda', VueLadda)

new Vue({
  el: '#app',
  props: ['source'],
  router,
  render: h => h(App)
})

Здесь мой компонент приложения (App.vue) 

<script>
export default {
  name: 'App',
  props: ['source'],
  data: function () {
    return {
    }
  },
  mounted: function () {
    console.log(this.source)
  }
}
</script>

Но я не определен.У кого-то есть идея, почему?

Ответы [ 3 ]

0 голосов
/ 08 июня 2018

Вы не передаете реквизиты корневому компоненту, вы регистрируете имя реквизита source.

Вы можете передавать реквизиты в функции рендеринга createElement псевдоним hсама функция 

new Vue({
  el: '#app',
  props: ['source'],
  router,
  render: h => h(App, {props:{ source:' source prop'}})
})

Или вы можете заменить опцию рендеринга опцией шаблона для передачи реквизитов в App.vue 

new Vue({
  el: '#app',
  props: ['source'],
  router,
  components:{App},
  template: '<App source="source prop"/>'
})
0 голосов
/ 08 июня 2018

Если я правильно вас понимаю, это звучит как плохая идея.Реквизит предназначен для создания реактивного канала для динамических данных, для обновления домена.Ссылки на скрипты и таблицы стилей не похожи на другой контент dom, а загрузка css динамически требует специальной обработки .Вы не можете просто изменить href на лету.

Почему вы хотите это сделать?Должен быть более чистый путь.

0 голосов
/ 08 июня 2018

Шаблон в App.vue очень прост: 

<template>
  <div id="app" source="mySource">
          <router-view/>
  </div>
</template>
...