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

  • Z时代
  • 2024-01-10
  • 分类：问答

我想混合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导入。 任何想法？

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

回答：

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

MyComponent.js

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

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

以上是 Vuejs单个文件组件与正常组件混合 的全部内容， 来源链接： utcz.com/qa/260088.html

回到顶部