当前位置:首页 » 《关注互联网》 » 正文

快速入门vue3.0系列之生命周期及父传值,建议“收藏细品”,会持续更新!❤_陈新科的博客

22 人参与  2022年01月13日 09:10  分类 : 《关注互联网》  评论

点击全文阅读


目录

生命周期

父传子

常用加值方法

代码抽离


生命周期

组合式 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 = 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,
//   };
// }
  • 博主公_号:前端老实人,期待各位小伙伴加入同学们一起学习的队伍哦❤

点击全文阅读


本文链接:http://zhangshiyu.com/post/33144.html

组件  执行  数据  
<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 萌宝甜妻:秦夫人是戏精小说全篇完整在线阅读(陶莺尔秦延之)热门章节列表
  • 送子观音节选列表_送子观音节选(程浩天殷茵程沐白)
  • 黄花落尽春光来结局+番外笔趣阁(宋晴沈子岳薛灵灵)_黄花落尽春光来结局+番外笔趣阁
  • 屠城时夫君带了外室逃生,后来他跪求我原谅推文_陆玄川秦绾绾***免费品鉴_小说后续在线阅读_无删减免费完结_
  • 完结文重生后我让校花保管所有准考证+完结篇列表_完结文重生后我让校花保管所有准考证+完结篇(秦雨然江述怀洛瑶)
  • 江映月小说小说全集+延伸+完本(前妻有喜,陆总请排队恭喜)畅享在线阅读
  • 风过南山,爱与愿违在线(唐婉心陆谨言)全书免费_(唐婉心陆谨言)风过南山,爱与愿违在线后续(唐婉心陆谨言)
  • 天阉老公出轨魅魔秘书,我找薄肌大佬生孩子他却后悔了免费(沈知薇贺宴礼)_天阉老公出轨魅魔秘书,我找薄肌大佬生孩子他却后悔了免费(沈知薇贺宴礼)
  • 秦雨然的重生后我让校花保管所有准考证彩蛋秦雨然江述怀洛瑶全书在线
  • 完结文送子观音高分完本列表_完结文送子观音高分完本(殷茵程沐白)
  • 此后春风皆过客(池婉白叙安)整本+后续+(此后春风皆过客)结局在线阅读
  • 春知晓梦不觉完结爽文(阮清歌薄时谦)_春知晓梦不觉完结爽文(阮清歌薄时谦)

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1