为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 【九月打卡】第16天 Vue3框架

【九月打卡】第16天 Vue3框架

2022.09.20 11:30 19浏览

课程名称:2022持续升级 Vue3 从入门到实战 掌握完整知识体系

课程章节:第3章 探索组件的理念

主讲老师:Dell

课程内容:

今天学习的内容包括:

  • 动态切换组件

  • keep-alive

  • 异步组件

  • v-once渲染标签

  • ref获取Dom节点

  • provid

  • inject

  • 编程练习

课程收获:

动态组件:根据数据的变化,结合 component 这个标签,通过is来指定子组件,来随时动态切换组件的显示 (component+:is)在外层嵌套<keep-alive> 保留数据(缓存切换前之前输入作用)

<keep-alive>

        <component  :is=‘currentItem’ />

</keep-alive>

https://img4.sycdn.imooc.com/6329220d000106ae04960146.jpg

代码实现

 const app = Vue.createApp({

      data() {

        return {

          crrentItem: 'section-child'

        }

      },

      methods: {

        handleClick() {

          if(this.crrentItem === 'section-child'){

            this.crrentItem = 'section-twochild'

          }else{

            this.crrentItem = 'section-child'

          }

        }

      },

      template:   //<component :is="crrentItem" /> 我显示的组件是由crrentItem的值决定的,如果值是section-child则显示section-child组件,反之亦然

      /*         <section-child v-show="crrentItem=='section-child'"/>

        <section-twochild v-show="crrentItem=='section-twochild'"/> */

      `

        <keep-alive>

          <component :is="crrentItem" />

        </keep-alive>

        <button @click="handleClick">切换</button>

        <async-commont-item />

      `

    })


    app.component('section-child', {

      data() {

        return {

          message: 'hello'

        }

      },

      template: `

        <div>{{message}}</div>

      `

    })


    app.component('section-twochild', {

      template: `

        <input />

      `

    })



异步组件:异步执行某些组件的逻辑 Vue.defineAsyncComponent(()=> { return new Promise((resolve,reject)=>{})})

成功时候响应resolve向外触发一个事件,rejecet是失败的时候调用的

https://img3.sycdn.imooc.com/632922190001506606100180.jpg

代码实现

const app = Vue.createApp({

      template:  

      `

        <async-commont-item />

      `

    })


    app.component('section-child', {

      data() {

        return {

          message: 'hello'

        }

      },

      template: `

        <div>{{message}}</div>

      `

    })


    app.component('section-twochild', {

      template: `

        <input />

      `

    })


    app.component('async-commont-item', Vue.defineAsyncComponent(() => {

      return new Promise((resolve, reject) => {

        setTimeout(() => {

          resolve({

            template: `<div>this is an async component</div>`

          })

        },3000)

      })

    }))


v-once指令绑定标签上面:让某个元素标签只渲染一次,即便后面发生变化了

https://img4.sycdn.imooc.com/632924f500012ebd06570349.jpg

https://img4.sycdn.imooc.com/632924eb00016cfd09420302.jpg

ref:实际上是获取Dom节点/组件引用的一个语法 (想要获取哪个Dom节点要在标签上用ref绑定(ref+="名字"),获取时为this.$refs.xxx)

注意:获取Dom节点的时候一定要等页面渲染完成,也就是Dom节点挂载上之后才能够获取,在生命周期函数mounted函数里面去获取

https://img3.sycdn.imooc.com/6329272000018e0905220102.jpg

https://img4.sycdn.imooc.com/63292716000146ba10100236.jpg

可以绑定后,在渲染之后操作Dom元素(但尽量减少对Dom的操作)

https://img3.sycdn.imooc.com/632927a100012f4903840080.jpg

https://img1.sycdn.imooc.com/6329279b00016e6402640095.jpg

ref:也可以获取子组件的Vue实例的一个引用然后通过这个引用再去调用子组件的一些方法(需要慎重使用,维护性不高)

https://img2.sycdn.imooc.com/63292de30001139607250369.jpg


ref也可以在父组件上获取子组件的方法provide、inject:多层组件传值

多层组件之间传值,可以将provide和inject搭配使用,一个提供,一个接受使用

1、provide如果想使用data里面的数据,必须使用函数的形式

2、provide提供的数据是一次性的,不是响应式的,不是双向绑定的,inject拿到的永远是第一次传的值

   provide想传递给其他组件自己的data值需要变成函数,但是只能传递一次,

   当其自身的data值改变时,不会再传给其余组件


https://img3.sycdn.imooc.com/632932a300018ae007800597.jpg

代码实现

const app = Vue.createApp({

      data() {

        return {

          count: 2

        }

      },

      provide() {

        return {

          count: this.count,

        }

      },

      template: `

        <child :count="count" />

      `

    })


      app.component('child', {

        template: `

          <child-child />

        `

      })


      app.component('child-child', {

        inject: ['count'],

        template: `

          <div>{{count}}</div>

        `

      })


      今天学习了动态组件,异步组件,ref获取Dom节点,跨组件传值provid,今天也是收获满满的一天,希望能够每天学习一点点,一直坚持下,加油! 

点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
9
获赞与收藏
34

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

50篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

146篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消