vue2基础使用(2)

vue学习 本文总阅读量次

重新补一下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)
      })
    },

异步

vue学习