Vue 组件三种export暴露方式和import引入方式

所有 .vue结尾的文件都是一个组件，代表的是一个小的功能。所有这样的组件最后都得交给App.vue 这一父组件所管理。要想把子组件数据和逻辑显示必须子组件在自己的vue文件内export暴露,，然后在App.vue中引入import才行。

一：export暴露方式

school.vue的Vue.extend:

const school = Vue.extend({
        data(){
            return{
               name:'博立中学',
               address:'芮城县'           
            }
        },
        methods:{

        }
 })

1.export方式 直接加extend：

extend const school = Vue.extend({})

2.export方式 统一暴露：

const school = Vue.extend({
        data(){
            return{
               name:'博立中学',
               address:'芮城县'           
            }
        },
        methods:{

        }
 })
export school

3.export方式 默认暴露：

const school = Vue.extend({
        data(){
            return{
               name:'博立中学',
               address:'芮城县'           
            }
        },
        methods:{

        }
 })
export default school

这一种可以简写如下(用的最多)：而且该组件的方法和数据以及其它都写在export default中

export default {
        //代表组件名称，最好与 school.vue中的school一致
        name:'school',
          data(){
            return{
               name:'博立中学',
               address:'芮城县'           
            }
        },
        methods:{
        }
}

特别注意：

//代表组件名称，最好与 school.vue中的school一致
 name:'school',

export输出方式可以输出一个或多个，
而export default只能输出一个，

二：import引入方式

在App.vue中：

<script>
//组件引入或者页面引入
import school from './components/school.vue'
//方法引入得加{}
import {hunhe2} from '../mixin'

将文件作为一个整体引入则是使用：import xxx from ‘路径’。
引入文件的一部分或某些部分的时候会使用带{}的方式：import { xxx } from ‘路径’。

特别注意：

上面school 要和子组件export default 的 name:‘school’, 中school保持一致。

顺便说下路径问题：

1. ./ 后面的包或文件与当前组件处于同一级(这一层级目录,同处于components下面)
   在listope.vue中import 引入itemope.vue:

import itemope from './itemope.vue'

2.../ 上一级目录
在student.vue中import 引入mixin.js。../代表src这一级目录。mixin就在src下面

import {hunhe2} from '../mixin'