Vue组件基础

一、自定义组件与HTML标签

1.组件的名称

定义组件名的方式有两种:
一:使用kebab-case(短横线分隔命名):my-component-name
当使用kebab-case定义一个组件时，必须在引用这个这个自定义元素时使用kebab-case
例如
二:使用PascalCase(首字母大写命名):MyComponentName
当使用PascalCase定义一个组件时，在引用这个自定义元素时两种命名法都可以使用。
也就是说和都是可接受的。

开发建议:
组件命名时用首字母大写命名法:DemoLogin
组件使用时用短横线分隔命名法:

2.组件的内容

        我们发现给组件写内容，默认不会改变组件显示的内容

        这就需要我们学习slot插槽。

        【slot--基本使用】
        当我们封装了一个组件，这个组件有个区域我不想写死，那就可以写插槽（slot）

        语法：在我不想写死的地方写<slot />

        外界接收的语法：
        <组件>传递的内容</组件>

slot的具名插槽：

     <!-- 
      slot的具名插槽：
      
      
      什么叫具名插槽？  =>  就是有名字的插槽
      为什么要用具名插槽？  =>  因为一个组件里可能有多个地方不想写死


      命名语法：
      <slot name='名字'>默认值</slot>


      使用语法：{依赖template包裹，并且用v-slot指定插槽名字}
      <template v-slot:插槽名>
           要传递的内容
      </template>


      简写语法：{把v-slot变成#}
      <template #插槽名>
            要传递的内容
      </template>
       -->

3.props对象声明

官方推荐用对象方式声明:

 props:{
    // 基本的类型检查('null' 和 'undefined'会通过任何类型检验)
    propA:Number,


    // 多个可能的类型
    propB:[String,Number],
    //这代表propsB可以是String,也可以是Number类型


    // 必填的字符串
    propC:{
        type:Sting,
        required:true
        //这代表这个type是父组件(就是App.vue)必须填入的,如果传入就会报错
    },


    // 带有默认值的对象
    propE:{
        type:Object,
        default:function(){//default(默认值)
            return{message:'hello'}
        }
        //如果父组件没有传值进来,我们就有一个默认值({message:'hello'}),
        // 但是如果父组件传值进去了,默认值就会取消
    },


    // 自定义验证函数
    propF:{
        valiodator:function(value){
            // 这个值必须匹配下列字符串中的一个
            return['success','warning','danger'].indexOf(value)
        }
        // 校验规则:function(value:传入的值的意思){
        //     return 制定规则
        //     // 如果不满足规则也会报错
        // }
    } 
 }



// props声明:一个组件需要显示声明它所接受的props,这样Vue才能知道外部传入的是什么类型的值

//使用props选项来定义: 

// 一:使用字符串数组来声明
export default{
    props:['name','age']
    //但是这样的话,如果传进来的name是一个number数据,
    //或者传进来的age是一个string类型,传进来的数值就会是失败,
    //所以,更推荐用对象形式传值

    props:{
        name:String,
        age:Number,
    }
    // 定义了数据类型后，如果给了错误的数据类型，网页就会报错
} 

小结：
1.什么属性限制要传递的类型?
type

2.什么属性限制必传?
required设置为true

3.什么属性设置成默认值
default(基本类型直接设置,复杂类型用函数设置)

4.什么设置自定义校验规则
valiodator(这是一个函数,函数有一个参数,参数就是传过来的值)
如果函数里return true代表校验通过,false代表检验失败

4.props单向数据流

[props单向数据流]

概念:父组件的数据改变了会自动流动到子组件,但是子不允许修改由props流过来的数据

所谓的单向数据流不允许子修改，是不允许改栈，但是可以改堆

例如:父传了数据给子,在子里面可以通过调用push,pop,shift,unshift,splice等等
而且改完后，父也会跟着改，因为他们指向的是同一个堆

但是在这里不允许改props上的栈上的数据,父可以改,而且改完后能流入到子。

5.emit

// [$emit] 

// 子里如何给父组件传递数据?
// 利用发通知的形式来间接传数据。 
// 发通知的语法:this.$emit('自定义的事件名',数据) 

// 父里要订阅这个通知(相当于监听这个事件) 
// <子组件 @自定义的事件名="函数"> 

// 当子的$emit执行时,就会自动调用父里绑定的函数,函数的参数就是子传递过来的数据。 

// 例:

// 子里的代码 
// <button @click="$emit('sb','hello')">点击后，要给父传递数据</button> 
// 解释:当子组件里面点了这个按钮,就会触发一个叫sb的事件,那个父组件如果监听了sb就会调用. 

// 父里的代码 
// <子组件 @sb="函数"/> 
// 当sb事件通知时,就会调用上面的函数,函数的参数就是永不过时. 

二、全局组件与局部组件

1.局部组件注册及使用

<template>
  <div>
    <!-- 
       局部组件注册及使用
       
       导入组件
       import 组件名 from'路径'
       
       注册组件
       export default{
           components:{
            
            组件名
            }
        }
        
        使用组件
        <组件名/>
     -->
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

2.全局组件注册及使用

<template>
  <div>
    <!-- 
    全局组件注册及使用
    
    局部组件:在哪里导入，就只能在哪里使用。
    全局组件:导入一次，其他地方都能用。
    
    main.js文件里
    导入组件
    import 组件名 from'路径'
    组册组件
    Vue.component('组件名'，导入的组件)
    -->
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>