vue传值的几种方式

vue传值的几种方式

   fn() => {
          1.通过路由携带参数进行传递参数path..query
          在A文件中传递
          this.$router.push({
              path:'/home',
              query{
                  id:123,
                  name:this.name
              }
          })
          在B文件中获取
          this.$route.query.id

          2.通过session stroge缓存的形式进行传递
          在A中设置缓存
          const orderData = {
              'id':123,
              'name':Lucy
          }
          sessionStorage.setItem('NewData',JSON.stringify(orderData));
          在B中获取缓存
          const dataB = JSON.parse(sessionStorage.getItem('NewData'));

          3.父子之间的传值，父组件传值给子组件.props
          父组件传递
          <div>
            <Children name='lucy'></Children>
          </div>
          components:{
              Children
          }
          子组件接收传递过来的值
          <div>{{name}}</div>  //展示
          props:{
              'name':[String]  //获取
          }
          或者props:['name']

          4.子组件往父组件传值，使用$emit
          子组件传递
          <div @click="fn"></div>
          fn(){
              this.$emit('name','这是我传递的值')
          }
          父组件接收值
          <Children @name="parentEvent"></Children>
          parentEvent(data){
            console.log(data)
          }
      }