vue3.0的生命周期和父子传值，一学就会#yyds干货盘点# _vue3.0

莫道桑榆晚，为霞尚满天。这篇文章主要讲述vue3.0的生命周期和父子传值，一学就会#yyds干货盘点#相关的知识，希望能为你提供帮助。
生命周期【vue3.0的生命周期和父子传值，一学就会#yyds干货盘点#】组合式 API 上的生命周期钩子与选项式 API 的名称相同，但前缀为 on：即 mounted 看起来像 onMounted。

setup() //setup组合式api的入口函数,在beforeCreate之前执行 const count=ref(0) console.log(setup); onBeforeMount(() => //组件挂载到节点之前执行 console.log(组件挂载到节点之前onBeforeMount); ) onMounted(() => console.log(onMounted组件挂载完成); ) onBeforeUpdate(() => //组件更新前执行 console.log(组件更新前执行onBeforeUpdate); ) onUpdated(() => //组件更新完成后执行 console.log(组件更新完成后执行onUpdated); ) onBeforeUnmount(() => console.log(组件卸载之前执行onBeforeUnmount); ) onUnmounted(() => console.log(组件卸载完成后onUnmounted); ) return count

父传子

// father组件 setup() //father作为父级组件,通过provide函数提供数据共享(不限层次) // provide只能向下传递数据,向子孙组件传递数据 provide(globalVal,这是father组件传递过来的值) const str = ref(str) provide(globalStr,str)return str// One组件 setup() const val = inject(globalVal) const str = inject(globalStr) provide(globalStr,这是one组件传递过来的值) return val, str// Two组件 setup() // inject通过自定的函数名获取到父级组件的共享数据 const val = inject(globalVal) // 父组件和爷组件都有globalStr,引用近的父组件内容 const str = inject(globalStr) return val, str

常用加值方法

const addUser = () => // alert(data.val); // 向数组的前面加一条数据 // 向前添加 data.todos.unshift( name: data.val, show: false ); // data.todos.push(//向后添加 //name:data.val,show:false // ) data.val = ""; ;

代码抽离

import userAdd from ../hook/userAdd.js export default setup() const total,val,todos,addUser = userAdd(); return total,val,todos,addUser, ; // 自定义函数 // function userAdd() //const data = https://www.songbingjia.com/android/reactive( //val:"", //todos: [ //name: "学习", show: false , //name: "敲代码", show: false , //], //); //const addUser = () => //// alert(data.val); //// 向数组的前面加一条数据 //// 向前添加 //data.todos.unshift( name: data.val, show: false ); //// data.todos.push(//向后添加 ////name:data.val,show:false //// ) //data.val = ""; //; //const total = computed(() => data.todos.length); //return //...toRefs(data), //addUser, //total, //; //

最后
如果对您有帮助，希望能给个