站网站推广,高手做网站,wordpress音乐网站主题,整站优化多少钱组件是什么
vue组件就是一个个独立的小型的ui模块#xff0c;整个大型的系统就是由一个个小型的UI模块拼接而成的 vue组件就是vue实例#xff0c;通过new Vue函数来创建的一个vue实例#xff0c;不同的组件只不过是options的不同#xff0c;我们基本百分之90的开发工作都…组件是什么
vue组件就是一个个独立的小型的ui模块整个大型的系统就是由一个个小型的UI模块拼接而成的 vue组件就是vue实例通过new Vue函数来创建的一个vue实例不同的组件只不过是options的不同我们基本百分之90的开发工作都是围绕options的配置来进行的
三大核心概念 属性、事件、插槽 属性 属性例子
export default {name: PropsDemo,// 不推荐使用这种做法不利于维护// props: [name, type, list, isVisible],// 建议使用下面的做法来声明属性(使用对象的形式声明)props: {name: String,type: {validator: function(type) {// 这个值必须匹配以下字符串中的一个return [success, warning, danger].includes(value);}},list: {type: Array,// 对象或数组默认值必须从一个工厂获取default: () []},isVisible: {type: boolean,default: false},// 不建议使用onChange来命名会和语法冲突onChange: {type: Function,default: () {}}}
}属性使用方法 Props.vue文件内容如下
templatedivname: {{ name }}brtype: {{ type }}brlist: {{ list }}brisVisible: {{ isVisible }}brbutton clickhandleClickchange type/button/div
/templatescript
export default {name: PropsDemo,// 自动挂载属性inheritAttrs: false,props: {name: String,type: {validator: function(value) {return [success, warning, danger].includes(value);}},list: {type: Array,default: () []},isVisible: {type: Boolean,default: false},onChild: {type: Function,default: () {} }},methods: {handleClick() {// 不可以这么做会报错, 因为我们的属性是单向数据流的不允许在子组件内更改父组件传递过来的值// this.type warning;console.log(触发)console.log(子组件的type是)console.log(this.type)this.onChild(123)}}
}
/scriptApp.vue文件使用如下
divPropsnameHello Vue!:typetype:is-visiblefalse:on-childhandlePropChangetitle属性Democlasstest1:class[test2]:style{ marginTop: 20px }stylemargin-top: 10px;//divscript
import Props from ./components/Props.vue;export default {name: App,components: {TodoItem,Props,// Event},data() {return {msg: hello geek!,info: ,list: [],type: success,name: 事件名}},methods: {handleClick() {if (this.info ! ) {this.list.push(this.info)this.info }},handlePropChange(param) {console.log(param)console.log(父组件)if (this.type success) {this.type warning} else {this.type success}console.log(父组件的type)console.log(this.type)},handleEventChange() {}}
}
/script
子组件中对属性进行了封装全部在Props中当父组件使用时通过:属性名称的方式进行引用和赋值 子组件定义了一个函数的属性onChild在父组件使用这个属性时也是和使用普通组件一样的方式对onChild进行赋值只不过赋的是函数是的函数也是作为参数来存在 此函数可以接收参数是否接收参数接收什么参数取决于子组件对此函数的定义可以看到子组件中有一个 handleClick方法方法内部对onChild进行了调用并传递参数123当父组件的handlePropChange方法在接收函数时也定义了一个参数用来接收(param)
handlePropChange(param) {console.log(param)console.log(父组件)if (this.type success) {this.type warning} else {this.type success}console.log(父组件的type)console.log(this.type)}事件 定义 Even.vue文件
templatedivname: {{ name || -- }}brinput :valuename changehandleChangebr/br/div clickhandleDivClickbutton clickhandleClick重制成功/buttonbutton click.stophandleClick重制失败/button/div/div
/templatescript
export default {name: EventDemo,props: {name: {type: String}},methods: {handleChange(e) {console.log(改变1)this.$emit(change, e.target.value)console.log(改变2)console.log(e.target.value)},handleDivClick() {console.log(清空)this.$emit(change, )},handleClick() {// 无论做什么都会失败// e.stopPropagation();}}
}
/script父组件引用方法
Event :nameeventName changehandleEventChange/// 导入
import Event from ./components/Event.vue;// 方法定义
handleEventChange(param) {console.log(父组件接收到change事件)if (param?.target?.value) {this.eventName param?.target?.valueconsole.log(param?.target?.value)} else {this.eventName }
}子组件定义方法: handleChange通过this.$emit(change, e.target.value)调用change方法传递当前输入框的值作为参数 父组件通过handleEventChange函数进行接收并声明一个参数param通过param中的param?.target?.value来获取传递的参数值
插槽 组件文件夹内新建文件Slot.vue
templatedivslot /slot nametitle /slot nameitem v-bind{ value: vue } //div
/template
script
export default {name: SlotDemo
}
/script父组件引用部分
SlotDemotemplate v-slot:titleptitle slot1/pptitle slot2/p/templatetemplate v-slot:itempropspitem slot-scope {{ props }}/p/template
/SlotDemo// js引用
import SlotDemo from ./components/Slot.vue;子组件通过定义nametitle的插槽、nameitem的插槽父组件通过v-slot:title和v-slot:itemprops来引用子组件定义的插槽
总结
