vue2基础使用(2)

重新补一下vue2的基础使用,对之前掌握的使用方法进行下回顾和查漏补缺

provide inject 注入

  • 例子见文档
  • provide是给子孙组件获取的能力,在组件中inject则可使用相关方法

mixins 混入

v-on 对象语法

  • 文档
    1
    2
    <!-- 对象语法 (2.4.0+) -->
    <button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

页面跳转

  • this.$router.push('/') // 目前用这样的方式来实现打开同一个子页面
  • 参考文档
  • 注意:router是vue常用工具,要与route区分开

带参数

  • 例子this.$router.push({name:'anotherPage',params:{id:1}});传递参数,this.$router.params.id获取参数
    • 注意:r不要漏了
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      // 推荐方法
      this.$router.push({
      name: 'index-order-management-OrderCheck', // 是文件夹路径拼接而成
      params: {
      path: "index",
      setid: 123456,
      }
      })

      // 不推荐方法,query传参数时,地址栏中可以看到传过来的参数信息
      this.$router.push({path:'/order-management/OrderCheck',query:{setid:123456}});
  • 一般获取位置:beforeRouteEnter函数中,通过next函数的vm.$route.params获取(注意此处无r
    1
    2
    3
    4
    5
    6
    beforeRouteEnter(to, from, next) {
    next(async vm => {
    const { params } = vm.$route
    console.log('---beforeRouteEnter',params)
    })
    },

异步