1

我正在尝试将 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'
  }
})

测试.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>'
})

索引.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。有任何想法吗？

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

4

1 回答 1

2

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

我的组件.js

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

如果您想保持MyComponent原样的格式，那么您需要在new Vue调用之前注册组件。

于 2017-12-03T09:49:41.107 回答