vue3 传值

父传子 

在子组件使用:传值  使用 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 更加简洁