【Vue】Vue组件--上

目录

一、组件基础

二、组件的嵌套关系

1. 基础架构

2. 嵌套 

三、组件注册方式

1. 局部注册：

2. 全局注册：

四、组件传递数据

1. 基础架构

2. 传递多值

3.  动态传递数据

五、组件传递多种数据类型

1. Number

2. Array

3. Object

六、组件传递Props的校验

 1. 默认值

2. 必选项

---

一、组件基础

        组件最大的优势就是可复用性。

        当使用构建步骤时，我们一般将vue组件定义在一个单独的.vue文件当中，这就被叫做单文件组织（SFC）

         组件组成结构 ----> 在components文件当中新建文件MyApp.vue

<template>
    <div class="container">{
  { message }}</div>
</template>
<script>
    export default{
        data(){
            return{
                message:'组件基础组成'
            }
        }
    }
</script>
<!-- 让当前样式只在当前组件中生效 ，如果不加scoped那么.container将会是全局样式在任何组件当中使用-->
<style scoped>
    .container{
        font-size: 30px;
        color: red;
    }
</style>

        组件引用结构-----在App.vue当中设置如下属性:

<script>
   //第一步引入组件
   import MyApp  from './components/MyApp.vue';

   export default{
        //第二步：注册组件
        components:{
            MyApp
        }
   }
</script>
<template>
    <!--第三步:显示组件-->
    <MyApp/>
</template>

---

二、组件的嵌套关系

 

        组件允许我们将UI划分为独立的、可重用的部分，并且可以对每个部分进行单独的思考。在实际应用中，组件常常被组织成层层嵌套的树状结构

        这和我们嵌套HTML元素的方式类似，Vue实现了自己的组件模型，使我们可以在每个组件内封装自定义内容与逻辑。

        新建pages文件夹，并创建以下文件‘

1. 基础架构

Header.vue

<template>
    <h3>Header</h3>
</template>
<style scoped>
    h3{
        width: 100%;
        height: 120px;
        border: 4px solid #333;
        text-align: center;
        line-height: 100px;
        box-sizing: border-box;
    }
</style>

在App.vue当中注册

<script>
  import Header from './components/Header.vue';
  export default{
    data(){

    },
    components:{
      Header
    }
  }
</script>
<template>
  <Header/>
</template>

 Main.vue:

<template>
    <div class="main">
        <h4>Main</h4>
    </div>
    
</template>

<style scoped>
    .main{
        float: left;
        width: 60%;
        height: 400px;
        border: 4px solid #333;
        text-align: center;
        line-height: 100px;
        box-sizing: border-box;
    }
    .main h4{
        text-align: center;
        background-color: beige;
    }
</style>

 Aside.vue:

<template>
    <div class="aside">
        <h4>Aside</h4>
    </div>
    
</template>

<style scoped> 
    .aside{
        float: right;
        width: 30%;
        height: 400px;
        border: 4px solid #333;
        text-align: center;
        line-height: 100px;
        box-sizing: border-box;
    }
</style>

2. 嵌套 

新建Article.vue:

<template>
    <h5>Article</h5>
</template>
<style>
    h5{
        width:80%;
        margin:0 auto;
        text-align: center;
        line-height: 50px;
        box-sizing: border-box;
        margin-top: 20px;
        background:#999;
    }
</style>

在main.vue里引用article.vue

<template>
    <div class="main">
        <h4>Main</h4>
        <Article/>
        <Article/>
    </div>
    
</template>
<script>
    import Article from './Article.vue';
    export default{
        components:{
            Article
        }
    }
</script>
<style scoped>
    .main{
        float: left;
        width: 60%;
        height: 400px;