父传子
在子组件使用:传值 使用 let props = defineProps([ ]) 接收
子传父
在子组件使用 let $emits = defineEmits([ ]) 传值 父组件使用自定义事件接收
useAttrs
需要引入 import {useAttrs} from 'vue ' let $attrs = useAttrs() 可以获取父组件传过来的所有属性 前提是没有defineProps接收 因为 defineProps 优先级比useAttrs高 可以用来对组件进行二次封装 :=$attrs 获取
ref
在子组件身上绑定一个ref let ‘绑定的名字’ = ref() 可以获取ref这个dom 但并不能获取到 子组件的属性和方法 可以使用defineExpose({}) 在子组件内部暴漏出来 通过ref就可以拿到
$parent
在子组件方法上使用参数$parent 可以获取父组件dom 可以使用defineExpose({}) 将父组件属性暴漏 可以修改父组件属性值
pinia
区别与vuex pinia中只有 state actions getters
pinia 有两种写法 选项式 组合式
选项式 导入 definestore import {defineStore} from 'pinia'
let infoStore = defineStore('info',{
state:()=>{
return { count:1014 }
},
actions:{
updateCount(){ this.count ++} //需要页面中调用 updateCount方法
}
})
export default infoStore
组合式 导入 import {defineStore} from 'pinia' import {ref} from 'vue'
let todoStore = defineStore('todo',()=>{
let todoInfo = ref([{name:郑源龙,sex:男,age:24}])
return {
todoInfo,
updateTodo(){ //页面中调用的方法updateTodo
todoInfo.value.push(....省略) }
}
})
export default todoStore
总结: 个人感觉pinia就相当于基于vue3语法写的一个公共存储方法 相比于vuex 更加简洁