.vue文件怎么使用组件？

.vue文件怎么使用组件？

在vue中组件以.vue结尾，一个.vue文件就是一个组件。

下面介绍下在组件中使用其他组件的方法。

（相关课程推荐：Vue.js教程）

1、首先创建一个组件MyTest.vue

<template>
    <div class="my-test">
        <ul>
            <li>导航01</li>
            <li>导航02</li>
            <li>导航03</li>
        </ul>
    </div>
</template>

<script>
    export default{
        name: 'MyTest',
        props: {

        }
    }
</script>

<style scoped>
.my-test ul{
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}
.my-test ul li{
    padding: 8px;
}
</style>

2、然后在App.vue中导入并使用

1. 使用import导入MyTest.vue组件

2. 在components中注册组件

3. 在template中调用组件

<template>
  <div id="app">
    <MyTest/>
  </div>
</template>

<script>
import MyTest from './components/MyTest.vue'

export default {
  name: 'app',
  components: {
    MyTest
  }
}
</script>

<style>
</style>

效果：