做原油的网站,企业网站小程序源码,营销型企业网站系统,深圳坪山高级中学一、组件通信
1.props 》 父向子传值 props 主要用于父组件向子组件通信。再父组件中通过使用:msgmsg绑定需要传给子组件的属性值#xff0c;然后再在子组件中用props接收该属性值
方法一 普通方式:// 父组件 传值child :msg1msg1 :listlist》 父向子传值 props 主要用于父组件向子组件通信。再父组件中通过使用:msgmsg绑定需要传给子组件的属性值然后再在子组件中用props接收该属性值
方法一 普通方式:// 父组件 传值child :msg1msg1 :listlist/childscriptimport child from ./child.vue;import { ref, reactive } from vue;export default {setup() {//基础类型传值const msg1 ref(父组件传给子组件的msg1);// 复杂类型数组或对象传值const list reactive([苹果, 梨, 香蕉])return {msg1,list}}}/script// 子组件 接收
templateul li v-fori in list :keyi{{ i }}/li/ul
/template
script
export default {// props接受父组件传过来的值props: [msg1, list],setup(props) {console.log(props);// { msg1:父组件传给子组件的msg1, list:[苹果, 梨, 香蕉] }},
}
/script方法二:使用setup语法糖// 父组件 传值
child :msgmsg :listlist
/child
script setupimport child from ./child.vue;const list reactive([苹果, 梨, 香蕉])const msg ref(父组件传给子组件的值);
/script// 子组件 接收
templateul li v-fori in list :keyi{{ i }}/li/ul
/template
script setup// 这里不需要在从vue中引入defineProps直接用const props defineProps({// 第一种写法msg: String,// 第二种写法list: {type: Array,default: () [],}})console.log(props);
/script2.emit方式子向父传值defineEmits $emits也就是通过自定义事件传值 主要用于子组件向父组件传值 在子组件的点击事件中 通过触发父组件中的自定义事件把想传给父组件的信息以参数形式带过去 父组件便可拿到子组件传过来的值
// 子组件 派发
templatebutton clickhandleClick按钮/button
/template
script setuplet infos ref(还好);const emit defineEmits([myClick]);//emits 为 defineEmits 显示声明后的对象。
// defineEmits:如存在多个监听事件则为 defineEmits([increase,myClick])const handleClick () {// 触发父组件中的方法并把值以参数的形式传过去emit(myClick, infos);emit(increase, ref(还好33));};
/script// 父组件 接收
templatechild myClickonMyClick increaseonIncrease/child
/template
script setupimport child from ./child.vue;// 父组件接受到子组件传过来的值const onMyClick (msg) {console.log(msg);}const onIncrease (msg) {console.log(msg.value);
}
/script3.expose / ref》父获取子得属性或方法
expose与ref 主要用于父组件获取子组件的属性或方法。在子组件中向外暴露出属性或方法父组件便可以使用 ref 获取到子组件身上暴露的属性或方法。
templatediv父组件拿到子组件的message数据{{ msg }}/divbutton clickcallChildFn调用子组件的方法/buttonhr /Child refcom /
/templatescript setupimport Child from ./child.vue;const com ref(null); // 通过 模板ref 绑定子组件const msg ref();onMounted(() {// 在加载完成后将子组件的 message 赋值给 msgmsg.value com.value.message;});function callChildFn() {console.log(com.value, );// 调用子组件的 changeMessage 方法com.value.show();// 重新将 子组件的message 赋值给 msgmsg.value com.value.message;}
/script子组件
templatediv 子组件/div
/template
script setupconst message ref(子组件传递得信息);const show () {console.log(子组件得方法);};defineExpose({message,show,});
/script
4.attrs
attrs 主要用于子组件获取父组件中没有通过 props 接收的属性。
templateChild :msg1msg1 :msg2msg2 title子组件 /
/templatescript setupimport Child from ./child.vue;const msg1 ref(信息1);const msg2 ref(信息2);
/script子组件
templatediv 子组件{{ msg1 }}-{{ attrs.msg2 }}-{{ attrs.title }}/div
/template
script setup// 子组件接收msg1defineProps({msg1: String,});const attrs useAttrs();// 因为子组件接收了msg1所以打印的结果中不会包含msg1, { msg2:信息1, title: 子组件 }// 如果子组件没有接收msg1打印的结果就是 { msg1: 信息1, msg2:信息12, title: 子组件 }console.log(attrs);
/script
5.provide/inject
遇到多层传值时使用 props 和 emit 的方式会显得比较笨拙。这时就可以用 provide 和 inject 了。 provide与inject 主要为父组件向子组件或多级嵌套的子组件通信。 provide在父组件中可以通过 provide 提供需要向后代组件传送的信息。 inject从父组件到该组件无论嵌套多少层都可以直接用 inject 拿到父组件传送的信息。
templatediv------祖父组件---------/divbutton clickfn改变location的值/buttonbr /div双向数据绑定/div姓名 {{ userInfos.username }}input v-modeluserInfos.username /Child /
/templatescript setupimport Child from ./child.vue;let location ref(传递祖父的参数);var userInfos reactive({username: 张三,age: 20,});let fn () {location.value 改变值;};provide(location, location);provide(userInfos, readonly(userInfos));
/script子组件
templatedivSun //div
/templatescript
import Sun from ./sun.vue;
/script
孙组件
templatedivh5-------------孙组件接受参数-------------/h5div1.祖父组件定义provide孙组件inject接受{{ location }}/divp用户信息 {{ userInfos.username }}/pbr /br /div2.provide inject实现父子组件传值的时候子组件改变数据也会影响父组件/divbr /姓名input v-modeluserInfos.username //div
/template
script setuplet location inject(location);let userInfos inject(userInfos);
/script注意增加readonly后子组件修改后不会影响到父组件类似安全的provide/inject
使用vue提供的injectionKey 类型工具来再不同的上下文中共享类型
context。tsimport { InjectionKey, Ref } from vueexport interface SetUser{name: stringage: number
}// 函数的的InjectionKey
export const setUserKey: InjectionKeySetUser Symbol()父组件
script setup
import {setUserKey } from ./context
provide(setUserKey , {
name: Karen, //如果输入1那么类型就会报错
age: 20})
/script子组件
script setup
import {setUserKey } from ./context
const user inject(setUserKey)// 输出SetUser | undefined
if(user){
console.log(user.name)//Karen
}
/script
6.readonly
获取一个对象 (响应式或纯对象) 或 ref 并返回原始代理的只读代理,不能给属性重新赋值。只读代理是递归的访问的任何嵌套 property 也是只读的。 简单得理解要确保父组件传递得数据不会被子孙组件更改时增加readonly
7.v-model
v-model 是 Vue 的一个语法糖。在 Vue3 中的玩法就更多了
7-1 单个v-model绑定
templateChild v-modelmessage /
/templatescript setupimport Child from ./child.vue;const message ref(父传给子);
/script
子组件
templatedivbutton clickhandleClick修改model/button{{ modelValue }}/div
/template
script setup// 接收defineProps([modelValue, // 接收父组件使用 v-model 传进来的值必须用 modelValue 这个名字来接收]);const emit defineEmits([update:modelValue]); // 必须用 update:modelValue 这个名字来通知父组件修改值function handleClick() {// 参数1通知父组件修改值的方法名// 参数2要修改的值emit(update:modelValue, 子改变值);}
/script
7-2 多个v-model绑定
templateChild v-model:msg1message1 v-model:msg2message2 /
/templatescript setupimport Child from ./child.vue;const message1 ref(水果1);const message2 ref(水果2);
/script
子组件
templatedivdivbutton clickchangeMsg1修改msg1/button {{ msg1 }}/divdivbutton clickchangeMsg2修改msg2/button {{ msg2 }}/div/div
/template
script setup// 接收defineProps({msg1: String,msg2: String,});const emit defineEmits([update:msg1, update:msg2]);function changeMsg1() {emit(update:msg1, 蔬菜1);}function changeMsg2() {emit(update:msg2, 蔬菜2);}
/script
7-3 v-model修饰符
v-model 还能通过 . 的方式传入修饰。v-model 有内置修饰符——.trim、.number 和 .lazy。但是在某些情况下你可能还需要添加自己的自定义修饰符。
templateChild v-model.uppercasefnmessage /
/templatescript setupimport Child from ./child.vue;const message ref(水果);
/script
子组件
templatedivdiv{{ modelValue }}/div/div
/template
script setupconst props defineProps([modelValue, modelModifiers]);const emit defineEmits([update:modelValue]);onMounted(() {console.log(props.modelModifiers, 自定义v-model 修饰符);// 判断有没有uppercasefn修饰符有的话就执行 下面得方法 方法if (props.modelModifiers.uppercasefn) {emit(update:modelValue, 蔬菜);}});
/script
8.插槽 slot
插槽可以理解为传一段 HTML 片段给子组件。子组件将 元素作为承载分发内容的出口。
8-1 默认插槽
插槽的基础用法非常简单只需在 子组件 中使用 标签就会将父组件传进来的 HTML 内容渲染出来。
templateChilddiv渲染/div/Child
/template
子组件
// Child.vuetemplatedivslot/slot/div
/template8-2 具名插槽
具名插槽 就是在 默认插槽 的基础上进行分类可以理解为对号入座。
父组件需要使用 标签并在标签上使用 v-solt: 名称 。子组件需要在 标签里用 name 名称 对应接收。
templateChildtemplate v-slot:monkeydiv渲染/div/templatebutton按钮/button/Child
/template
子组件
templatediv!-- 默认插槽 --slot/slot!-- 具名插槽 --slot namemonkey/slot/div
/template8-3 作用域插槽
template!-- v-slot{scope} 获取子组件传上来的数据 --!-- :listlist 把list传给子组件 --Child v-slot{ scope } :listlistdivdiv{{ scope.name }}--职业{{ scope.occupation }}/divhr //div/Child
/template
script setupimport Child from ./child.vue;const list reactive([{ name: 鲁班, occupation: 辅助 },{ name: 貂蝉, occupation: 刺客和法师 },{ name: 虞姬, occupation: 射手 },]);
/script
子组件
templatediv!-- 用 :scopeitem 返回每一项 --slot v-foritem in list :scopeitem/slot/div
/template
script setupdefineProps({list: {type: Array,default: () [],},});
/script
