首页 > 其他 > 详细

vue 钩子函数的使用

时间:2019-12-13 17:06:17      阅读:99      评论:0      收藏:0      [点我收藏+]

1、什么是自定义指令,有哪些钩子函数及自定义指令的使用场景

①自定义指令是什么?以及自定义指令的使用场景

    在Vue中,有很多内置指令,但是这些指令只能满足我们最基础的使用,当我们在实际项目中遇到了必须要对DOM进行操作的逻辑时,我们就用到了自定义指令

②自定义指令的钩子函数

    bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

    inserted:被绑定元素插入父节点时调用 

    update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。

    componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。

    unbind:只调用一次,指令与元素解绑时调用。

2、父组件获取异步动态数据传递给子组件,报错如何解决?

    在父组件给子组件传值的时候,给子组件加一个判断,如果数据没有请求到就不渲染当前组件

<div v-if="list">

</div>

data() {

    return{

           list : [ ]

    }

}

3、vue-router参数传递方法详述及区别

    vue-router传参两种方式:params和query

方法一:

    query 方式传参和接收参数

     传参:

        this.$router.push({

              path:‘/openAccount‘,

              query:{id:id}

        });

     接收参数:

       this.$route.query.id

    传参是this.$router,接收参数是this.$route

两者区别:

        $router为VueRouter实例,想要导航到不同URL,则使用$router.push方法

        $route为当前router跳转对象,里面可以获取name、path、query、params等

方法二:

     params方式传参和接收参数

    传参:

          this.$router.push({

              name:‘/openAccount‘,

              params:{

                    id: id

                  }

            })

接收参数: this.$route.params.id

query和oarams的区别:

    query相当于get请求,页面跳转的时候,可以在地址栏看到请求参数,而params相当于post请求,参数不会再地址栏中显示

4、vue-router有哪几种导航钩子

    全局导航钩子:beforeEach、afterEach

    组件内导航:beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

    独享导航守卫:beforeEnter




链接:https://www.jianshu.com/p/16f78e2dc004

vue 钩子函数的使用

原文:https://www.cnblogs.com/liang715200/p/12036088.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!