人力招聘网站建设目的,网站建设的主要工作,国外做直播网站,网页设计十大品牌目录前言#xff1a;一、什么是组件二、注册组件1. 全局注册2. 局部注册二、传递数据【父 - 子】1. 字符串数组的形式2. 对象的形式三、组件事件【子 - 父】1. 字符串数组式声明自定义事件2. 【子组件】触发组件事件3. 【父组件】监听子组件自定义事件4. 组件事件例子…
目录前言一、什么是组件二、注册组件1. 全局注册2. 局部注册二、传递数据【父 - 子】1. 字符串数组的形式2. 对象的形式三、组件事件【子 - 父】1. 字符串数组式声明自定义事件2. 【子组件】触发组件事件3. 【父组件】监听子组件自定义事件4. 组件事件例子总结前言 在编写vue里的SPASingle Page Application单页面应用时我们始终绕不开组件的使用Vue3 里有一些重要更新在这里分享给大家。 一、什么是组件
组件Component是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素封装可重用的代码。
组件系统让我们可以用独立可复用的小组件来构建大型应用几乎任意类型的应用的界面都可以抽象为一个组件树 组件就相当于页面的零件当做正常的标签使用不过能够进行自定义的数据传输和事件监听。 组件内也能使用其他的组件任意处都能够使用。 二、注册组件
一个 Vue 组件在使用前需要先被 “注册”这样 Vue 才能在渲染模板时找到其对应的实现组件注册有两种方式全局注册、局部注册 1. 全局注册
可使用 app.component(name, Component)注册组件的方法在此应用的任意组件的模板中使用
name注册的名字Component需要注册的组件
// 在 main.js 中注册全局组件
import { createApp } from vue
import App from ./App.vue
// 1引入需要被注册的组件
import Login from ./components/Login.vue const app createApp(App)// 2全局注册组件
app.component(MLogin, Login)app.mount(#app)// 我们使用注册的组件
templateh3登录系统/h3!-- 使用全局注册的组件 --MLogin /
/template2. 局部注册
局部注册的组件需要在使用它的父组件中显式导入并且只能在该父组件中使用 在组合式 API 中的 script setup 内直接导入的组件就可以在模板中直接可用无需注册。 script setup
// 1引入需要注册的组件无需注册
import LoginVue from ./components/Login.vue;
/scripttemplateh3登录系统/h3!-- 2使用全局注册的组件 --LoginVue /
/template二、传递数据【父 - 子】
如果父组件向子组件进行传递数据那么我们需要在子组件中声明 props 来接收传递数据的属性可采用字符串数组式或对象式来声明 props 父组件向子组件传递数据在使用组件 let 的标签上采用属性方式传递的 props 值可使用 v-bind: 或 : 来绑定属性 组件中 props 中的数据是只读的不可直接更改只能通过父组件进行更改 声明与使用 在选项式 API 中 1. 我们可以提供 props 选项来声明接收传递的数据 2. 在 JS 中可使用 this.$props 来访问声明的自定义的属性 3. 在视图模板中可直接访问 props 中声明的自定义属性在组合式 API 中 1. 我们可以采用 defineProps 宏来声明接收传递的数据 2. 在 JS 中可使用 defineProps 返回的对象来访问声明的自定义的属性 3. 在视图模板中可直接访问 defineProps 中声明的自定义属性 1. 字符串数组的形式
// 字符串数组的形式
script setup// 使用 defineProps 宏来声明
defineProps([flat, title]) /script例子
// 父组件
script setup
import { ref } from vue;
import ButtonVue from ./components/Button.vue;let isError ref(false) // 主题
let isFlat ref(false) // 阴影
let btnText ref(普通按钮) // 按钮文本
/scripttemplate主题input typecheckbox v-modelisError阴影input typecheckbox v-modelisFlat按钮文本input typetext v-modelbtnTexthr!-- 父向子传值可采用属性的方式赋值 --ButtonVue :titlebtnText :errorisError :flatisFlat/
/template// 子组件
script setup
// 声明接收父组件传递的属性值自定义属性
let propsData defineProps([title, error, flat])function showPropsData() {// 在 JS 中需要通过 defineProps 返回对象来访问 props 的内容console.log(propsData)console.log(propsData.title)console.log(propsData.error)console.log(propsData.flat)
}function changeErrorProps() {// 不能直接修改 props 的数据因为是只读的propsData.error !propsData.error
}
/scripttemplate!-- 在视图模板上可直接使用 props 中的属性 --button :class{ error, flat } clickshowPropsData mousedown.rightchangeErrorProps{{ title }}/button
/templatestyle
button {border: none;padding: 12px 25px;
}.error {background-color: rgb(197, 75, 75);color: white;
}.flat {box-shadow: 0 0 10px grey;
}
/style2. 对象的形式
对象形式声明的 props可以对传来的值进行校验如果传入的值不满足类型要求会在浏览器控制台中抛出警告来提醒使用者 对象形式声明的 propskey 是 prop 的名称值则为约束的条件 对象中的属性 type类型如 String、Number、Boolean、Array、Object、Date、Function、Symbol default默认值对象或者数组应当用工厂函数返回 required是否必填布尔值 validator自定义校验函数类型 script
// 对象的形式defineProps({// 基础类型检查// 给出 null 和 undefined 值则会跳过任何类型检查propA: Number,// 多种可能的类型propB: [String, Number],// 必传且为 String 类型propC: {type: String,required: true},// Number 类型的默认值propD: {type: Number,default: 100},// 对象类型的默认值propE: {type: Object,// 对象或数组的默认值// 必须从一个工厂函数返回。// 该函数接收组件所接收到的原始 prop 作为参数。default(rawProps) {return { message: hello }}},// 自定义类型校验函数propF: {validator(value) {// The value must match one of these stringsreturn [success, warning, danger].includes(value)}},// 函数类型的默认值propG: {type: Function,// 不像对象或数组的默认这不是一个工厂函数。这会是一个用来作为默认值的函数default() {return Default function}}})
/script例子// 父组件
script setup
import { ref } from vue;
import ButtonVue from ./components/Button.vue;let isError ref(false) // 主题
let isFlat ref(false) // 阴影
let btnText ref(普通按钮) // 按钮文本
/scripttemplate主题input typecheckbox v-modelisError阴影input typecheckbox v-modelisFlat按钮文本input typetext v-modelbtnTexthr!-- 父向子传值可采用属性的方式赋值 --ButtonVue :titlebtnText :errorisError :flatisFlat/
/template// 子组件
script setup
// 声明接收父组件传递的属性值自定义属性
let propsData defineProps({title: {type: String,required: true},error: Boolean,flat: Boolean,tips: {type: String,default: 我是一个普通的按钮}
})function showPropsData() {// 在 JS 中需要通过 defineProps 返回对象来访问 props 的内容console.log(propsData)console.log(propsData.title)console.log(propsData.error)console.log(propsData.flat)
}function changeErrorProps() {// 不能直接修改 props 的数据因为是只读的propsData.error !propsData.error
}
/scripttemplate!-- 在视图模板上可直接使用 props 中的属性 --button :titletips :class{ error, flat } clickshowPropsData mousedown.rightchangeErrorProps{{ title }}/button
/templatestyle
button {border: none;padding: 12px 25px;
}.error {background-color: rgb(197, 75, 75);color: white;
}.flat {box-shadow: 0 0 10px grey;
}
/style注意 所有 prop 默认都是可选的除非声明了 required: true除 Boolean 外的未传递的可选prop将会有一个默认值 undefinedBoolean 类型的未传递 prop 将被转换为 false当 prop 的校验失败后Vue 会抛出一个控制台警告【在开发模式下】注意 prop 的校验是在组件实例被创建之前 1. 在选项式 API 中实例的属性比如 data、computed 等) 将在 default 或 validator 函数中不可用 2. 在组合式 API 中defineProps 宏中的参数不可以访问 script setup 中定义的其他变量因为在编译时整个表达式都会被移到外部的函数中 特别提醒 关于 Boolean 类型转换 为了更贴近原生 boolean attributes 的行为声明为 Boolean 类型的 props 有特别的类型转换规则 如声明时defineProps({ error: Boolean }) 传递数据时 - MyComponent error/相当于 MyComponent :errortrue / - MyComponent /相当于 MyComponent :errorfalse / 三、组件事件【子 - 父】
有的时候父组件在使用子组件时子组件如何给父组件传值呢
子组件声明自定义的事件子组件中触发自定义事件可传值父组件使用子组件时监听对应的自定义事件并执行父组件中的函数获取子组件传递的值 1. 字符串数组式声明自定义事件
在选项式 API 中子组件可通过 emits 选项来声明自定义的事件在组合式 API 中子组件可通过 defineEmits() 宏来声明自定义的事件
字符串数组式声明自定义事件
采用字符串数组可以声明简单的自定义事件
script setupdefineEmits([inFocus, submit])
/script对象式声明自定义事件
采用对象式声明自定义事件还可以进行校验传递的参数是否符合预期要求 对象式声明自定义事件中属性名为自定义事件名属性值则是是否验证传递的参数
属性值为 null 则不需要验证属性值为函数时参数为传递的数据函数返回 true 则验证通过返回 false 则验证失败验证失败可以用警告语句提示开发者【注意无论是 true 还是 false 都会继续执行下去的父组件都会获取到传递的值】
script setup
defineEmits({autoEvent1: null, // 无需校验// 需要校验param 可以是多个参数返回布尔值来表明事件是否合法autoEvent2: (param) {// true 则通过// false 则不通过可以在控制台输入警告语句}
})
/script2. 【子组件】触发组件事件
在选项式 API 中可通过组件当前实例 this.$emit(event, ...args) 来触发当前组件自定义的事件 在组合式 API 中可调用 defineEmits 宏返回的 emit(event, ...args) 函数来触发当前组件自定义的事件 其中上方两个参数分别为
event触发事件名字符串类型...args传递参数可没有可多个
script setup// 自定义事件并返回 emit 函数
const emit defineEmits([changeAge])function emitAgeEvent() {// 触发自定义事件 changeAge并传递参数 120emit(changeAge, 1, 20)
}
/scripttemplatebutton clickemitAgeEvent触发自定义事件/buttonhr!-- 触发自定义事件 changeAge并传递参数 30 --button clickemit(changeAge, 30)触发自定义事件/button
/template3. 【父组件】监听子组件自定义事件
使用 v-on:eventcallback 或者 eventcallback 来监听子组件是否触发了该事件
event事件名字camelCase 形式命名的事件在父组件中可以使用 kebab-case 形式来监听callback回调函数如果子组件触发该事件那么在父组件中执行对应的回调函数回调函数声明参数可自动接收到触发事件传来的值
script setup
import { ref } from vue;import ButtonVue from ./components/Button.vue;let startAge ref(0)
let endAge ref(0)// 子组件触发事件的回调函数
function addAge(start_age, end_age) {console.log(----------------);console.log(start_age)console.log(end_age)startAge.value start_ageendAge.value end_age
}
/scripttemplateh3开始年龄{{ startAge }}/h3h3结束年龄{{ endAge }}/h3!-- 使用引入的组件并通过属性传递数据 --ButtonVue change-ageaddAge /
/template4. 组件事件例子
字符串数组式声明自定义事件
// 父组件
script setup
import { reactive } from vue;
import StudentVue from ./components/Student.vue;let student reactive({name: Jack,age: 18,sex: 男
})// 获取子组件传递值
function getNewAge(newAge) {console.log(年龄的新值 newAge)student.age newAge
}
function getNewAgeAndName(newAge, newName) {console.log(年龄的新值 newAge)console.log(名字的新值 newName)student.age newAgestudent.name newName
}
function getNewStudent(stu){console.log(学生新值);console.log(stu);student.age stu.agestudent.name stu.namestudent.sex stu.sex
}
/scripttemplate{{ student }}hrStudentVue change-studentgetNewStudentchange-age-and-namegetNewAgeAndName change-agegetNewAge /
/template// 子组件
script setup
// 自定义事件
let emit defineEmits([changeAge, changeAgeAndName, changeStudent])function emitEventAge() {// 选项式通过 this.$emit 触发自定义事件并传值emit(changeAge, 30)
}/scripttemplatebutton clickemitEventAge更改年龄/buttonbrbrbutton clickemit(changeAgeAndName, 10, Annie)更改年龄和名字/buttonbrbrbutton clickemit(changeStudent, { age: 40, name: Drew, sex: 男 })更改学生验证通过/buttonbrbrbutton clickemit(changeStudent, { age: -10, name: Tom, sex: 男 })更改学生验证失败/button
/template对象式声明自定义事件
// 父组件
script setup
import { reactive } from vue;
import StudentVue from ./components/Student.vue;let student reactive({name: Jack,age: 18,sex: 男
})// 获取子组件传递值
function getNewAge(newAge) {console.log(年龄的新值 newAge)student.age newAge
}
function getNewAgeAndName(newAge, newName) {console.log(年龄的新值 newAge)console.log(名字的新值 newName)student.age newAgestudent.name newName
}
function getNewStudent(stu){console.log(学生新值);console.log(stu);student.age stu.agestudent.name stu.namestudent.sex stu.sex
}
/scripttemplate{{ student }}hrStudentVue change-studentgetNewStudentchange-age-and-namegetNewAgeAndName change-agegetNewAge /
/template// 子组件
script setup
// 自定义事件
let emit defineEmits({changeAge: null, // 无需验证changeAgeAndName: null, // 无需验证changeStudent: stu {if (stu.age 0) {console.warn(年龄不得小于等于0)// false验证不通过会有警告语句父组件依旧可以获取该值return false}// true验证通过return true}
})function emitEventAge() {// 选项式通过 this.$emit 触发自定义事件并传值emit(changeAge, 30)
}/scripttemplatebutton clickemitEventAge更改年龄/buttonbrbrbutton clickemit(changeAgeAndName, 10, Annie)更改年龄和名字/buttonbrbrbutton clickemit(changeStudent, { age: 40, name: Drew, sex: 男 })更改学生验证通过/buttonbrbrbutton clickemit(changeStudent, { age: -10, name: Tom, sex: 男 })更改学生验证失败/button
/template总结 欢迎大家加入我的社区在社区中会不定时发布一些精选内容https://bbs.csdn.net/forums/db95ba6b828b43ababd4ee5e41e8d251?category10003 以上就是 Vue3 中组件的使用上不懂得也可以在评论区里问我或私聊我询问以后会持续发布一些新的功能敬请关注。 我的其他文章https://blog.csdn.net/weixin_62897746?typeblog
