间歇性笔记--从头过一遍组件的"三要素"-CSDN博客

组件的prop&slot&event

对组件的prop&slot&event三个API的学习整理~~

prop

大小写问题---驼峰命名

1.在字符串模板中能正常使用;
```
    ...
    props:['myData'],
    template:`<h3>{{myData}}</h3>`
    ...
复制代码
```
2.在html中需要使用短横线分隔命名(kebab-case),因为HTML中大小写不敏感,浏览器会将所以大写字符解释为小写;
```
    <dDiv my-data='hi'></dDiv>
复制代码
```

类型
1.数组形式;

props:['myData','myData1']
复制代码

2.对象形式,可以对组件的prop进行验证(注：基础类型检测null和undefined始终通过);

    props:{
        //单个类型
        myData:Number,
        //多个类型
        myData1:[Number],
        myData2:{
            //必填
            required:'true',
            //默认值
            default:0,
            //自定义验证
            validator:function(){}
        }
    }
复制代码

传递
传递prop数据时，一般情况都使用v-bind:绑定,否则接受的数据都会为字符串--字符串除外;
单向数据流
- 父级组件的prop更新会使的子组件更新,但是反之不行;
- 子组件改变prop的方法:(不适用于对象与数组) 1.在子组件的data中用作初始值,一般用于当做子组件的data;
```
data(){
    return
    {
        myData1:this.myData,
    }
}
复制代码
```
  2.在子组件中定义计算属性,一般在需要进行转换的情况；
```
    computed:{
        myDataTrim(){
            return this.myData.trim();
        }
    }
复制代码
```
- 对于prop为对象或者数组时，传入的是引用，修改会影响父组件的值,可以根据情况选择拷贝方式(深拷贝/浅拷贝)进行赋值；
传递子组件未定义的数据
1. 会绑定在子组件的根元素上面；
2. 如果传入的特性与子组件的根元素特性相同时。一般情况下，外部传入的值会替换掉子组件的值。class/style除外,会合并值。
3. 禁用特性继承
  子组件中设置：inheritAttrs: false。但是设置不会影响style/class的绑定;子组件可以通过$attrs获取未绑定的特性；

slot

承载分发内容的出口
可以让组件标签之间的内容有意义,可以是任何模板代码;
```
<my-link>myLink</my-link>
<a>
    <slot></slot>
</a>
//渲染成：<a>myLink</a>
复制代码
```
可以在slot中设置默认值,父组件不提供内容时使用；
```
<slot>defaultValue</slot>
复制代码
```
作用域组件只能访问自身作用域的内容---父组件不能访问子组件的prop(作用域插槽除外);
作用域插槽在slot设置prop,让父组件可以访问子组件的内容; 当只有一个默认插槽时，可以省略template;
```
//slotProps是个对象，收集所有的
<my-component v-slot='slotProps'>slotProps.myData</my-component>
复制代码
```
获取插槽内容时，可以使用解构以及设置默认值;

具名插槽子组件中多个插槽存在时，使用具名插槽让内容传入对应的插槽。
v-slot只能添加在template,默认名称default---只有一个插槽时例外。

//基本使用---2.6起之后的版本
child
<div>
    <my-component1>
        <slot name='component1'></slot>
    </my-component1>
    <my-component2>
        <slot></slot>
    </my-component2>
</div>

parent
<child>
    <template v-slot:component1>
        哈哈哈
    </template>
    我是默认插槽的值
</child>
复制代码

缩写(v-slot: --> #) --- 注:必须存在参数,无参数时可使用#default

自定义事件

事件名---Vue官网推荐使用kebab-case格式的事件名
子组件调用父组件自定义事件
在子组件中，通过$emit(eventName[,param])方法触发父组件的自定义事件；
```
//parent.vue
<d-div @parent-event = 'showData'></d-div>

//child.vue
this.$emit('parent-event');
复制代码
```
自定义组件的v-model
在父组件中使用v-model时，默认会使用value的prop和名为input的事件。但是在单选、复选框等控件时，value可能用于其他值传值时会冲突，使用model避免冲突。
感觉使用场景太偏，可以不使用prop为value的特性进行数据传递。(小声bb--)
例子：Vue官网的自定义事件
原生事件绑定到组件
.navite修饰符。将监听子组件根元素的原生事件,不影响子组件内部的同名事件绑定,先执行父组件上绑定。
$listeners 包含了父作用域中的v-on事件监听器(不包括.native)。

.sync

语法糖

<my-component
    :data.sync='data'>
</my-component>

等同于
//其实就是触发父组件事件
<my-component
    v-bind:data='data'
    @update:data='data=$event'>
</my-component>
//$event子组件触发父组件抛出的值,只接受第一个参数;
子组件
this.$emit('update:data','newData');
复制代码