vue---组件基础

单文件组件

vue单文件组件（又名*.vue文件，缩写为SFC）是一种特殊的文件格式，它允许将Vue组件的模板、逻辑与样式封装在单个文件中。

1、在components中创建组件文件MyComponent.vue

2、

//模板
<template>
    <h3>单文件组件</h3>
</template>


//逻辑
<script>
//默认导出的一个对象，包含组件的内容
    export default{
        name:"MyComponent"//name代表组件的名称
    }
</script>


//样式
<style>
    h3{
        color:red;
    }
</style>

加载组件

第一步：引入组件

import MyComponentVue from './components/MyComponent.vue'

第二步：挂载组件

components:{MyComponentVue}

第三步：显示组件

<my-componentVue />

1、找到App.vue（根组件，所有的组件都是基于它一层层加载的）

2、可以看到上面我们已经在export default中导出了MyComponent，在App.vue中进行

引入组件：

<template>
</template>

<script>
    //引入组件
    import MyComponent from "./components/MyComponents.vue"//新建MyComponents.vue的位置

    export default{
        name:'App'
}
</script>

<style>
</style>

挂载组件： 

<template>
</template>

<script>
    import MyComponent from "./components/MyComponents.vue"//新建MyComponents.vue的位置
    export default{
        name:'App',

        //挂载组件
        components:{
                 MyComponent
 }
}
</script>

<style>
</style>

显示组件：

<template>
    //显示组件
    <MyComponent />

    //当它有多个单词的时候，可以给它进行拆分，单词之间用 - 来进行连接
    //显示组件也可以写成<my-component />
</template>

<script>
    import MyComponent from "./components/MyComponents.vue"//新建MyComponents.vue的位置
    export default{
        name:'App',
        components:{
                 MyComponent
 }
}
</script>

<style>
</style>

打开网页输入：localhost:8080即可看到页面

scoped

如果在style中添加此属性，就代表当前样式，只在当前组件中生效。

比如：

<template>
    <h3>你好</h3>
</template>

<script>
    export default{
        name:' MyComponent'
    }
</script>

<style scoped>//只在当前组件MyComponent中显示，如果想全局共享，就不要加scoped
    h3{
        color:red
    }
</style>

组件的组织

通常一个应用会以一颗嵌套的组件树的形式来组织。整个页面都是由组件组成的，组件与组件之间的引用关系会形成一个组件的组织。也就可以说，像我们刚刚说的MyComponent组件里面也可以添加组件，并不一定非要在App.vue中写组件。如果其中有一个组件出现问题，不一定会影响其他的组件。