在 vue 中组件以. vue 结尾, 一个. vue 文件就是一个组件.
下面介绍下在组件中使用其他组件的方法.
(相关课程推荐: vue.js 教程 https://www.html.cn/jskuangjia/vue/ )
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>
效果:
来源: http://www.css88.com/qa/vue-js/15274.html