当前位置: 首页 > Web前端 > HTML5

vue中组件传值的一些问题

时间:2023-04-04 23:42:44 HTML5

1:父子组件传值**父组件传给子组件:需要在子组件中通过props接收值子组件传给父组件:$emit("自定义事件",要传递的值)child--->父级需要在子组件中将点击事件传递给父组件值,点击事件触发后,传递this.$emit("自定义事件",所要传递的值value)**注意**父组件接收到时,相应的传值操作必须在相应的子组件中接收。(图片被我盗用了!侵删!!)**注意**动态数据需要使用以下方法2.通过路由带参数传值①两个组件A和B,A组件通过orderId传给B查询组件(触发事件可以是点击事件、钩子函数等)this.$router.push({path:'/componentsB',query:{orderId:123}})//跳转到B②获取B中的A组件component传递的参数this.$route.query.orderId3.通过设置SessionStorage缓存来传递(这个没用过)①两个组件A和B,在A组件中设置缓存orderDataconstorderData={'orderId':123,'price':88}sessionStorage.setItem('缓存名',JSON.stringify(orderData))②B组件可以获取A中的缓存集constdataB=JSON.parse(sessionStorage.getItem('缓存名'))此时dataB就是数据orderData5、为什么要用vuex用vuex进行价值传递?父子组件),或者大型spa单页框架项目,页面多,层层嵌套传值,极其麻烦。使用vuex维护共享状态或数据会很方便。