租网站服务器,游戏网站开发协议,360建筑网官网怎么登录,网站开发语言手册目录
1、props
2、自定义事件 #xff08;emit#xff09;
3、mitt#xff08;任意组件的通讯#xff09;
4、v-model【封装ui组件库用的多#xff0c;平时用的少。和vue2有点不同】
5、$attrs 6、$refs和$parent 7、provide和inject
8、pinia#xff08;即vue2中…目录
1、props
2、自定义事件 emit
3、mitt任意组件的通讯
4、v-model【封装ui组件库用的多平时用的少。和vue2有点不同】
5、$attrs 6、$refs和$parent 7、provide和inject
8、pinia即vue2中的vuex
9、插槽
默认插槽
具名插槽
作用域插槽ui组件库用得多
10、总结 1、props 子组件也可以如下调用父组件的方法 2、自定义事件 emit 父组件send-toysaveToy 子组件接收const emit defineEmits([send-toy]) 调用emit(send-toy,参数) 3、mitt任意组件的通讯 1. pubsub 2. $bus 3. mitt 接收数据的:提前绑定好事件(提前订阅消息)提供数据的:在合适的时候触发事件发布消息) 安装mitt
npm i mitt -S utils/emitter.ts
import mitt from mitt//调用mitt得到emitter,emitter能绑事件、触发事件
const emitter mitt()/*** * //绑定事件
emitter.on(test1,(){console.log(被调用)
})
//触发事件
setTimeout((){emitter.emit(test1)
},1000)setTimeout((){emitter.off(test1)emitter.all.clear()//全部解绑
},3000)*/export default emitter
子组件中单独引入使用。【另一种方法时添加到全局变量中也是可以的这里只单独引入了一下】 4、v-model【封装ui组件库用的多平时用的少。和vue2有点不同】
父组件
!-- eslint-disable vue/no-parsing-error --
!--功能功能描述时间2024年02月06日 21:49:29修改时间
--
script setup langts
import { ref } from vue
import myInput from ./myInput.vuelet vv ref(hello)
/scripttemplatediv!-- input typetext v-modelvv --!-- (HTMLInputElement$event.target).value --!-- input typetext :valuevv inputvv$event.target.value --!-- 这段代码的本质就是下面那行被注释掉的内容 --myInput v-modelvv/myInput!-- myInput :modelValuevv update:modelValuevv $event/myInput --/div
/templatestyle scoped/style子组件myInput.vue
!--功能功能描述时间2024年02月06日 21:49:41修改时间
--
script setup langts
import {ref} from vue
defineProps([modelValue])
const emit defineEmits([update:modelValue])
/scripttemplateinput typetext :valuemodelValueinputemit(update:modelValue,(HTMLInputElement$event.target).value)
/templatestyle scoped
input{border:1px solid #ddd;height:30px;font-size:20px;
}
/style vue内置的属性是modelValue,不想用这个属性怎么办 v-model:自己想要的属性名
如下 这意味着我们可以在组件标签上多次使用v-model $event到底是啥?啥时候能.target 对于原生事件$event就是事件对象 能.target对于自定义事件$event就是触发事件时所传递的数据不能.target 5、$attrs 和vue2中的$attrs一样都是实现 祖组件 和 子/孙组件 相互传递数据。$attrs都排除了props中声明的属性。 祖 祖组件可以这么写 script setup langts
import { ref } from vue
//import Child from ,...
let vv ref(hello)
function updateFunc(val:string){vv.value val
}
/scripttemplatetemplatechild :a1 :msgvv v-bind{b:2,c:3} :updateFuncupdateFunc/child
/template/templatestyle scoped/style子组件可以这么写 script setup langts
//import GrandChild from ....
defineProps([a])
/scripttemplatediv{{$attrs}}/divGrandChild v-bind$attrs/GrandChild
/templatestyle scoped/style孙组件中可以这么写:
templatediv{{$attrs}}/div
/template
script setup
import { useAttrs } from vueconst props defineProps({msg: {type: String}
})const attrs useAttrs()console.log(props: , props)
console.log(attrs: , attrs)
/script 6、$refs和$parent
父组件 script setup langts
import { ref } from vue
//import Child1 from ,...
//import Child2 from ,...
let c1 ref()
let c2 ref()
function changeToy(){c1.value.toy 111
}
function changeMoney(){c2.value.money 0
}
function changeAll($refs:{[key:string]:any}){for (let key in $refs){$refs[key].book 1 }
}
let house ref(3)
defineExpose({house})
/scripttemplatetemplatechild1 refc1/child1child2 refc2/child2button clickchangeToy修组件1/buttonbutton clickchangeMoney修组件2/buttonbutton clickchangeAll($refs)修全部组件/button
/template/templatestyle scoped/style子组件(child1.vue和child2.vue几乎一样下面就只写一个)
!--功能功能描述时间2024年02月07日 13:01:06修改时间
--
script setup langts
import {ref} from vue
let toy ref(车车)
let money ref(200)
let book ref(1)
defineExpose({toy,book})
function clearHouse(parent:any){console.log(parent)parent.house 0
}
/scripttemplatedivh1子组件1/h1{{ toy }}br{{ money }}br{{ book }}/divbutton clickclearHouse($parent)败光家产/button
/templatestyle scoped
/style
注意为何上面的代码【parent.house】后面没有加【.value】。原因如下 7、provide和inject 真正的祖孙之间通信。不需要中间组件 祖组件 script setup langts
import { reactive, ref,provide} from vue
let house reactive({total:3,price:100
})
let money ref(100)
function updateMoney(val:number){money.valueval
}
//向后代提供数据或方法
// provide(qianContent,{money:money.value,updateMoney}) //这里不能.value否则会失去响应式
provide(qianContent,{money,updateMoney})
provide(fang,house) //这里不能.value否则会失去响应式
/scripttemplateh1祖组件/h1div{{ house }}/divdiv{{ money }}万/divdiv{{ house.total }}/divdiv{{ house.price }}/div
/templatestyle scoped/style孙组件
!--功能功能描述时间2024年02月07日 13:01:06修改时间
--
script setup langts
import {inject} from vue
// let m inject(qian,我是默认值)
let {money,updateMoney} inject(qianContent,{money:0,updateMoney:(params:number){}})
let house inject(fang,{total:0,//默认值price:0//默认值
})
/scripttemplateh1孙组件/h1div家产{{ money }}/divdivh2房子/h2div数量{{ house.total }}/divdiv价值{{ house.price }}/div/divbutton clickupdateMoney(0)败光家产/button
/templatestyle scoped
/style
8、pinia即vue2中的vuex
参考之前的文章
9、插槽
默认插槽 具名插槽
写法1v-slot:name 写法2 简写方式 #name 作用域插槽ui组件库用得多 场景数据在子组件子组件需要把数据传给父组件。子组件的dom结构由父组件决定 作用域插槽也可以有名字
10、总结
