vue组件可以用html文件,.vue文件怎么使用组件？

.vue文件怎么使用组件？

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

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

(相关课程推荐：Vue.js教程)

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

• 导航01
• 导航02
• 导航03

export default{

name: 'MyTest',

props: {

}

}

.my-test ul{

list-style: none;

display: flex;

margin: 0;

padding: 0;

}

.my-test ul li{

padding: 8px;

}

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

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

2. 在components中注册组件

3. 在template中调用组件

import MyTest from './components/MyTest.vue'

export default {

name: 'app',

components: {

MyTest

}

}

效果：

更多Vue.js相关技术文章，请访问Vue.js答疑栏目进行学习！