组件

定义：组件就是局部功能界⾯
目的是：根据业务需求⾃定义组件，并实现组件复⽤
组件在起名字的时候建议采⽤ my-login这样格式来命名
使⽤步骤：

1. ⾃定义组件

2. 在被使⽤的地⽅引⼊并注册到components中

3. ⽤⾃定义标签，标签名字就是定义的组件名字

    <template>
        <div>
        <header-area></header-area>
        </div>
       </template>
       <script>
        import HeaderArea from './components/HeaderArea.vue';
        export default {
        // 定义属性
        data() {
        return {
        }
        },
        components: { HeaderArea },
        methods: {
        },
        }
       </script>
       <style lang='scss' scoped></style>
   

头部

        <template>
        <div>
        <h1>这是头部</h1>
        </div>
       </template>
       <script>
        export default {
        // 定义属性
        data() {
        return {
        }
        },
        methods: {
        },
        }
       </script>
       <style>
       </style>

父组件向子组件传值

作⽤：⽗组件向⼦组件传递参数 步骤：

1. 定义⼦组件
2. ⽗组件中使⽤⼦组件
3. 在引⽤⼦组件的时候将参数绑定在⼀个⾃定义的属性上去
4. ⼦组件⾥接收传值

父组件

<template>
    <div>
    <header-area :title="title"></header-area>
    </div>
   </template>
   <script>
    import HeaderArea from './components/HeaderArea.vue';
    export default {
    // 定义属性
    data() {
    return {
    title: "⾸⻚"
    }
    },
    components: { HeaderArea },
    methods: {
    },
    }
   </script>
   <style lang='scss' scoped></style>

子组件

   <template>
<div>
<h1>{{ title }}</h1>
 </div>
</template>
<script>
export default{
 //定义属性
 data()
            {
    return
    {
}
},
 props:
['title'],//另⼀种写法
 // props: {
 // title: {
 // type: String,
 // default: '默认标题',
 // // required: true
 // }
 // },
 methods:{

},
}
</script>
<style></style>

● ⼦组件⾥设置接直接哪 些 属 性 的 传 值 （ 可 ⽤ 数 组形式 设 置 ， 也 可 以 ⽤ 对 象形式 设 置 ， 前 ⾯ 必 须 写 的 是 props ）

● 在 使 ⽤ 对 象形式 设 置 时 ， 可 以 设 置type 、 default 、 required 等

● 在 使 ⽤ 对 象形式 设 置 时 ， 参 数 值 类 型 （ 即type）不 是 只 能 写 ⼀个， 它 可 以 写 很 多个， 只 需 要 ⽤ 数 组 写即可

● ⼀般required 和default 只 写 ⼀个， 因 为 如 果 default 存 在 ， 那 么 rquired 设 置true 就 没 有 意义了

● 如 果 ⽗ 组 件 调 ⽤ ⼦ 组 件 时 定 义 的 属 性 格 式 是 ：kebab-case 的 类 型 ， 那 么 ⼦ 组 件接收 的 时 候 要 写 成 驼 峰 格 式接收 与 使 ⽤