VUE父子传参及非父子传参----小白理解

    技术2022-07-13  72

    父组件向子组件传参,自定义属性,props接收

    子组件向父组件传参,自定义事件,$emit发送,@事件接收

    自我理解小栗子,有错各位不吝赐教

    父组件和子组件,首先需要单独引入这个子组件

    父组件----->子组件

    父组件里面                   <son     'p-s'='我是父传子的参数'></son>         //自定义属性p-s

     

    子组件里面                  <script>           props:['p-s']            </script>             //props接收

    子组件----->父组件

    子组件里面                  <script>  mounted(){     this.$emit("s-p"  ,   '我是子传父的参数')       }  </script>

     

    父组件里面                   <son   @click='s-p'> {{title}} </son>           //自定义事件

                                        data( )  {   return   {    title : " "  }

                                         methods:{     s-p( )  {    this.title=title;   }  }

    a页面跳转且传参给b页面

    a页面          this.$router.replace(  {  name:"b",  params : { name ,  age } } )       //router.replace跳转到b页面,参数是name和age

    b页面          let { name , age } = this.$route.params      //route.params接收跳转过来的参数ame和age  

    存取LocalStorage

    存         LocalStorage.SetItem("age",'20')            //age是自己命名的,20是取到的值相当于key:value

    取         var age=LocalStorage.getItem('age')      //获取存储的key值

    Processed: 0.011, SQL: 9