组件的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;
2.在子组件中定义计算属性,一般在需要进行转换的情况;data(){ return { myData1:this.myData, } } 复制代码
computed:{ myDataTrim(){ return this.myData.trim(); } } 复制代码
- 对于prop为对象或者数组时,传入的是引用,修改会影响父组件的值,可以根据情况选择拷贝方式(深拷贝/浅拷贝)进行赋值;
-
传递子组件未定义的数据
- 会绑定在子组件的根元素上面;
- 如果传入的特性与子组件的根元素特性相同时。一般情况下,外部传入的值会替换掉子组件的值。class/style除外,会合并值。
- 禁用特性继承
子组件中设置: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'); 复制代码
- 当子组件需要修改prop的值,可以通过此方式更新父组件的值;
后记
粗略的对组件的三个重要要素进行了学习,接下来可能或许是组件间通信的学习~