Question

我正在尝试将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中。

我还尝试在main.js文件中执行MyComponent导入。有任何想法吗？

我真的不想将现有的所有组件转换为单个文件:(

Answer 1

根据docs，子组件是一个对象，而不是附加到Vue实例的东西（即Vue.component()），所以声明你的组件是这样的：

MyComponent.js

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

如果您希望保持MyComponent的格式，那么您需要在new Vue来电之前注册该组件。

Vuejs单个文件组件与普通组件混合

1 个答案: