Однофайловые компоненты Vuejs, смешанные с обычными компонентами

Я пытаюсь смешать компоненты одного файла vuejs с обычным стилем компонентов (не знаю, как они называются), для которого у меня уже есть код, разработанный для этого.

main.js

import Vue from 'vue'
import test from './test.vue'
import VueMaterial from 'vue-material'

Vue.use(VueMaterial)

new Vue({
  el: '#app',
  render: h => h(test, 
    {props: {
      testprop: 'ttttt'
    }
  }),
  data:{
    // /testprop: 'tytytytyty'
  }
})

test.vue

<template>
  <div>
    <my-component></my-component>
    <div>This is the first single page component</div>
  </div>
</template>

<script>
import MyComponent from '../src/components/MyComponent.js'
import TestTest from '../src/components/TestTest.vue'
  export default {
    name: 'MainApp',
    props: ['testprop'],
    components: {
            TestTest,
            MyComponent

    },
    mounted: function(){

    },
    computed:{
      returnProp: function(){
        return this.testprop
      }
    }
  }
</script>

<style lang="scss" scoped>
  .md-menu {
    margin: 24px;
  }
</style>

MyComponent.js Компонент обычного стиля

window.Vue = require('Vue') //would give errors vue undefined if i dont't add this line
Vue.component('my-component', {
    name: 'my-component',
    template: '<div>Normal component</div>'
})

index.html

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1,minimal-ui" name="viewport">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic|Material+Icons">
    <link rel="stylesheet" href="https://unpkg.com/vue-material@beta/dist/vue-material.min.css">
    <link rel="stylesheet" href="https://unpkg.com/vue-material@beta/dist/theme/default.css">

    <title>vuematerial</title>
  </head>
  <body>
    <div id="app">
        <main-app :testprop="testprop"></main-app>
    </div>

    <script src="dist/build.js"></script>

  </body>
</html>

Однофайловый компонент и дочерний однофайловый компонент (здесь не показаны) отображаются нормально. Нормальный тип будет отображаться как

<!--function (t,n,r,i){return Mt(e,t,n,r,i,!0)}-->

В сгенерированном html.

Iv'e также попытался выполнить импорт MyComponent в файл main.js. Любые идеи?

Я не очень хочу конвертировать все мои существующие компоненты в однофайловые :(


vue.js vue-component vue-material
person tachi    schedule 03.12.2017    source источник
comment
Не уверен на 100%, но, судя по всему, попробовать стоит. Вместо window.Vue = ... сделайте import Vue from 'vue'   -  person webnoob    schedule 03.12.2017
comment
Пытался добавить импорт Vue из vue в файл MyComponent.js. ошибок нет, но по-прежнему создается компонент как ‹! - function (t, n, r, i) {return Mt (e, t, n, r, i,! 0)} -›   -  person tachi    schedule 03.12.2017
comment
Хорошо, оставьте импорт на месте, так как это правильный способ импортировать его, а не испортить объект окна.   -  person webnoob    schedule 03.12.2017

Ответы (1)


arrow_upward
2
arrow_downward

Согласно docs, дочерний компонент - это объект, а не что-то прикреплен к экземпляру Vue (т.е. Vue.component()), поэтому объявите свой компонент следующим образом:

MyComponent.js

export default {
    name: 'my-component',
    template: '<div>Normal component</div>'
}

Если вы хотите сохранить формат MyComponent как есть, вам необходимо зарегистрировать компонент перед вызовом new Vue.

person webnoob    schedule 03.12.2017
comment
Большое спасибо, такое простое изменение, и теперь я надеюсь, что мой существующий код будет хорошо работать. - person tachi; 03.12.2017
comment
Совсем без проблем, рад, что помог :) - person webnoob; 03.12.2017