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單個文件組件與正常組件混合

回答

相關問題