脚本宝典收集整理的这篇文章主要介绍了快速入门vue3.0系列之生命周期及父传值,建议“收藏细品”,会持续更新!❤,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
目录
生命周期
父传子
常用加值方法
代码抽离
组合式 API 上的生命周期钩子与选项式 API 的名称相同,但前缀为 onF1a;即 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 = 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,
// };
// }
以上是脚本宝典为你收集整理的快速入门vue3.0系列之生命周期及父传值,建议“收藏细品”,会持续更新!❤全部内容,希望文章能够帮你解决快速入门vue3.0系列之生命周期及父传值,建议“收藏细品”,会持续更新!❤所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。