{"id":956,"date":"2022-03-02T14:33:29","date_gmt":"2022-03-02T06:33:29","guid":{"rendered":"http:\/\/blog.xrhoujie.com\/?p=956"},"modified":"2022-03-16T15:13:11","modified_gmt":"2022-03-16T07:13:11","slug":"vue%e4%bc%a0%e5%80%bc-%e7%88%b6%e5%ad%90%e5%85%84%e5%bc%9f%e8%b7%af%e7%94%b1%e5%ad%a6%e4%b9%a0%e7%ac%94%e8%ae%b0","status":"publish","type":"post","link":"http:\/\/blog.xrhoujie.com\/?p=956","title":{"rendered":"vue\u4f20\u503c-\u7236\u5b50&\u5144\u5f1f&\u8def\u7531(\u5b66\u4e60\u7b14\u8bb0)"},"content":{"rendered":"\n
\u7236\u4f20\u5b50\uff1a<\/strong>\nA\uff1a\n\u6211\u4eec\u8981\u628aarr\u6bcf\u4e00\u4e2a\u503c\u4f20\u7ed9\u5b50\u7ec4\u4ef6B\n<template>\n\t<div>\n\t\t1\uff1a<\u5b50\u7ec4\u4ef6B v-for=\"(item,index) in arr\" :item=\"item\" :key=\"index\"><\/\u5b50\u7ec4\u4ef6B>\n\t\t\u5982\u679c\u8981\u628a\u4e00\u4e2a\u6570\u7ec4\u76f4\u63a5\u4f20\u8fc7\u53bb\uff0c\u90a3\u4e48\u5c31\u76f4\u63a5\u8fd9\u4e48\u5199\uff1a\n\t\t2\uff1a<\u5b50\u7ec4\u4ef6B :arr=\"arr\"><\/\u5b50\u7ec4\u4ef6B>\n\t<\/div>\n<\/template>\n\n<script>\nimport \u5b50\u7ec4\u4ef6B from '.\/b.js';\n\texport default {\n             components:{\n                \u5b50\u7ec4\u4ef6B,\n              }\n\t\tname:'\u7236\u7ec4\u4ef6A',\n\t\tdata(){\n\t\t\treturn {\n\t\t\t\tarr:[1,2,3,4,5] \/\/\u628a\u8fd9\u4e2aarr\u4f20\u7ed9\u5b50\u7ec4\u4ef6B\n\t\t\t}\n\t\t}\n\t}\n<\/script>\n\n\n\nB:\n<script>\n\texport default {\n\t\tprops:['arr'],\/\/\u8fd9\u91cc\u63a5\u6536\n\t\tmounted(){\n\t\t\tconsole.log(this.arr)\/\/[1,2,3,4,5]\n\t\t}\n\t}\n<\/script>\n\n\u5b50\u4f20\u7236<\/strong>\uff1a\n\nB:\n<template>\n  <div>\n    <button @click='handleFun'>\u6d4b\u8bd5\u4e00\u4e0b<\/button>\n  <\/div>\n<\/template>\n<script>\n\texport default {\n\t\tdata(){\n\t\t\treturn {\n\t\t\t\tmsg:\"123123123123\"\n\t\t\t}\n\t\t},\n\t\tmethods:{\n\t\t        this.$emit('add',this.msg)\n\t\t}\n\t}\n<\/script>\n\n\nA:\n<template>\n  <div>\n    <button @add='add'>\u6d4b\u8bd5\u4e00\u4e0b{{msg}}<\/button>\n  <\/div>\n<\/template>\n\n<script>\n\texport default {\n               methods:{\n\t\t\tadd(data){\n                         this.msg = data;\n                  }\n\t}\n<\/script>\n\n\u5144\u5f1f\u4f20\u503c<\/strong>\n\/\/bus.js:\nimport Vue from 'vue'\nexport default new Vue\n\n\u7236\u7ec4\u4ef6\uff1a\n\n<template>\n     <components-a><\/components-a>\n     <components-b><\/components-b>\n<\/template>\n\ncomponents-b:\n<script>\n\timport bus from '@\/assets\/bus'\n\texport default {\n\t\tdata(){\n\t\t\treturn {\n\t\t\t\tmsg:\"123123123123\"\n\t\t\t}\n\t\t},\n\t\tmounted(){\n\t\t\tbus.$emit('msgB',this.msg)\n\t\t}\n\t}\n<\/script>\n\n\ncomponents-:\n<script>\n\timport bus from '@\/assets\/bus'\n\texport default {\n\t\tmounted(){\n\t\t\tbus.$on('msgB',(msgb)=>{\n\t\t\t\tconsole.log(msgb)  \/\/123123123123\n\t\t\t})\n\t\t}\n\t}\n<\/script>\n\n\n<\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
\u8def\u7531\u4f20\u503c\uff1a<\/strong><\/strong><\/p>\n\n\n\n
\u4e00\u3001\u901a\u8fc7\u8def\u7531\u5e26\u53c2\u6570\u8fdb\u884c\u4f20\u503c<\/strong><\/p>\n\n\n\n
\u2460\u4e24\u4e2a\u7ec4\u4ef6 A\u548cB,A\u7ec4\u4ef6\u901a\u8fc7query\u628aorderId\u4f20\u9012\u7ed9B\u7ec4\u4ef6\uff08\u89e6\u53d1\u4e8b\u4ef6\u53ef\u4ee5\u662f\u70b9\u51fb\u4e8b\u4ef6\u3001\u94a9\u5b50\u51fd\u6570\u7b49\uff09<\/p>\n\n\n\n
this.$router.push({ path: ‘\/conponentsB’, query: { orderId: 123 } }) \/\/ \u8df3\u8f6c\u5230B<\/p>\n\n\n\n
\u2461\u5728B\u7ec4\u4ef6\u4e2d\u83b7\u53d6A\u7ec4\u4ef6\u4f20\u9012\u8fc7\u6765\u7684\u53c2\u6570this.$route.query.orderId<\/p>\n\n\n\n

\u4e8c\u3001sessionStory\uff1a<\/strong><\/p>\n\n\n\n
\u2460\u4e24\u4e2a\u7ec4\u4ef6A\u548cB\uff0c\u5728A\u7ec4\u4ef6\u4e2d\u8bbe\u7f6e\u7f13\u5b58orderDataconst orderData = { ‘orderId’: 123, ‘price’: 88 }s<\/p>\n\n\n\n
essionStorage.setItem(‘\u7f13\u5b58\u540d\u79f0’, JSON.stringify(orderData))<\/p>\n\n\n\n

\u2461B\u7ec4\u4ef6\u5c31\u53ef\u4ee5\u83b7\u53d6\u5728A\u4e2d\u8bbe\u7f6e\u7684\u7f13\u5b58\u4e86<\/strong>const dataB = JSON.parse(sessionStorage.getItem(‘\u7f13\u5b58\u540d\u79f0’))<\/p>\n","protected":false},"excerpt":{"rendered":"
\u8def\u7531\u4f20\u503c\uff1a \u4e00\u3001\u901a\u8fc7\u8def\u7531\u5e26\u53c2\u6570\u8fdb\u884c\u4f20\u503c \u2460\u4e24\u4e2a\u7ec4\u4ef6 A\u548cB,A\u7ec4\u4ef6\u901a\u8fc7query\u628aorderId\u4f20\u9012\u7ed9B\u7ec4\u4ef6\uff08 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[41,1],"tags":[38],"_links":{"self":[{"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/posts\/956"}],"collection":[{"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=956"}],"version-history":[{"count":1,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/posts\/956\/revisions"}],"predecessor-version":[{"id":957,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=\/wp\/v2\/posts\/956\/revisions\/957"}],"wp:attachment":[{"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=956"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=956"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/blog.xrhoujie.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=956"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}