Vuejs单个文件组件与正常组件混合

我想混合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/[email protected]/dist/vue-material.min.css"> 
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/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也尝试在main.js文件中执行MyComponent导入。任何想法？

我真的不希望我的所有现有的组件转换成单一文件的人:(

来源

2017-12-03 tachi

不是100％确定，但它看起来很值得一试。而不是'window.Vue = ...'do'从'vue''导入Vue – webnoob

试图从'vue'向MyComponent.js文件添加import vue。没有错误，但仍生成组件为<！ - function（t，n，r，i）{return Mt（e，t，n，r，i，！0）} - > – tachi

好的，保持导入因为这是导入它的正确方法，而不是搞乱窗口对象。 – webnoob

按照docs，子组件是一个对象，连接到Vue的实例不是（即Vue.component()）等等声明你的组件是这样的：

MyComponent.js

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

如果你想保留MyComponent的格式是，那么你就需要之前注册的组件致电。

来源

2017-12-03 09:49:41 webnoob

非常感谢，这么简单的改变，现在我希望可以让我现有的代码发挥出色。 – tachi

完全没问题，很高兴帮助:) – webnoob

Vuejs单个文件组件与正常组件混合

回答

相关问题