{"id":549,"date":"2025-12-06T16:10:12","date_gmt":"2025-12-06T08:10:12","guid":{"rendered":"https:\/\/www.52runoob.com\/?p=549"},"modified":"2025-12-06T16:10:12","modified_gmt":"2025-12-06T08:10:12","slug":"vue3%e5%b0%81%e8%a3%85%e5%85%a8%e5%b1%80%e8%87%aa%e5%ae%9a%e4%b9%89%e6%8c%87%e4%bb%a4%e5%ae%9e%e7%8e%b0%e6%8c%89%e9%92%ae%e6%9d%83%e9%99%90%e6%8e%a7%e5%88%b6%e5%8a%9f%e8%83%bd%e5%ae%9e%e4%be%8b","status":"publish","type":"post","link":"https:\/\/www.52runoob.com\/index.php\/2025\/12\/06\/vue3%e5%b0%81%e8%a3%85%e5%85%a8%e5%b1%80%e8%87%aa%e5%ae%9a%e4%b9%89%e6%8c%87%e4%bb%a4%e5%ae%9e%e7%8e%b0%e6%8c%89%e9%92%ae%e6%9d%83%e9%99%90%e6%8e%a7%e5%88%b6%e5%8a%9f%e8%83%bd%e5%ae%9e%e4%be%8b\/","title":{"rendered":"Vue3\u5c01\u88c5\u5168\u5c40\u81ea\u5b9a\u4e49\u6307\u4ee4\u5b9e\u73b0\u6309\u94ae\u6743\u9650\u63a7\u5236\u529f\u80fd\u5b9e\u4f8b"},"content":{"rendered":"\n<p>\u4e0b\u9762\u7ed9\u4f60\u4e00\u4efd <strong>Vue 3 \u5c01\u88c5\u5168\u5c40\u81ea\u5b9a\u4e49\u6307\u4ee4\u5b9e\u73b0\u6309\u94ae\u6743\u9650\u63a7\u5236\u7684\u5b8c\u6574\u5b9e\u4f8b\uff082025 \u6700\u65b0\u7248\uff09<\/strong>\u3002<br>\u5305\u542b\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u5168\u5c40\u6743\u9650\u6307\u4ee4\u5c01\u88c5<\/li>\n\n\n\n<li>\u52a8\u6001\u6743\u9650\u5224\u65ad<\/li>\n\n\n\n<li>Vue \u5168\u5c40\u6ce8\u518c<\/li>\n\n\n\n<li>\u7ec4\u4ef6\u5185\u5b9e\u9645\u4f7f\u7528\u6848\u4f8b<\/li>\n\n\n\n<li>\u6269\u5c55\uff1a\u7981\u7528\u6309\u94ae \/ \u9690\u85cf\u6309\u94ae\u4e24\u79cd\u6a21\u5f0f<\/li>\n<\/ul>\n\n\n\n<p>\u53ef\u76f4\u63a5\u590d\u5236\u5230\u9879\u76ee\u4f7f\u7528\uff01<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\ud83d\ude80 Vue 3 \u5168\u5c40\u81ea\u5b9a\u4e49\u6307\u4ee4\u5b9e\u73b0\u6309\u94ae\u6743\u9650\u63a7\u5236\uff08\u5b8c\u6574\u5b9e\u4f8b\uff09<\/h1>\n\n\n\n<p>\u5b9e\u73b0\u76ee\u6807\uff1a<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>\u6839\u636e\u5f53\u524d\u7528\u6237\u6743\u9650\uff0c\u81ea\u52a8\u9690\u85cf\u6216\u7981\u7528\u6309\u94ae\u3002<\/p>\n<\/blockquote>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\u2b50 \u4e00\u3001\u76ee\u5f55\u7ed3\u6784\u5efa\u8bae<\/h1>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nsrc\/\n \u251c\u2500 directives\/\n \u2502    \u2514\u2500 permission.js\n \u251c\u2500 store\/\n \u2502    \u2514\u2500 user.js\n \u251c\u2500 main.js\n \u2514\u2500 App.vue\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\u2b50 \u4e8c\u3001\u6a21\u62df\u7528\u6237\u6743\u9650 Store\uff08\u5b9e\u9645\u9879\u76ee\u53ef\u6765\u81ea\u63a5\u53e3\uff09<\/h1>\n\n\n\n<p><code>store\/user.js<\/code><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nimport { reactive } from &quot;vue&quot;;\n\nexport const userStore = reactive({\n  permissions: &#x5B;&quot;user:add&quot;, &quot;user:edit&quot;], \/\/ \u7528\u6237\u5b9e\u9645\u62e5\u6709\u7684\u6743\u9650\n});\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\u2b50 \u4e09\u3001\u5c01\u88c5\u5168\u5c40\u6743\u9650\u6307\u4ee4 permission<\/h1>\n\n\n\n<p><code>directives\/permission.js<\/code><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nimport { userStore } from &quot;@\/store\/user&quot;;\n\n\/\/ mode = &quot;remove&quot;: \u65e0\u6743\u9650\u5219\u4ece DOM \u5220\u9664\uff08\u9ed8\u8ba4\uff09\n\/\/ mode = &quot;disabled&quot;: \u65e0\u6743\u9650\u5219\u7981\u7528\u6309\u94ae\n\nexport default {\n  mounted(el, binding) {\n    const { value, modifiers } = binding;\n\n    if (!value) {\n      console.error(&quot;v-permission \u6307\u4ee4\u9700\u8981\u4f20\u5165\u6743\u9650\u6807\u8bc6\uff0c\u5982 v-permission=\\&quot;&#039;user:add&#039;\\&quot;&quot;);\n      return;\n    }\n\n    const hasPermission = userStore.permissions.includes(value);\n\n    if (!hasPermission) {\n      \/\/ \u5982\u679c\u4f7f\u7528 v-permission.disabled \u2192 \u7981\u7528\u6309\u94ae\n      if (modifiers.disabled) {\n        el.disabled = true;\n        el.classList.add(&quot;is-disabled&quot;);\n      } else {\n        \/\/ \u9ed8\u8ba4\uff1a\u76f4\u63a5\u4ece\u754c\u9762\u5220\u9664\n        el.parentNode &amp;amp;&amp;amp; el.parentNode.removeChild(el);\n      }\n    }\n  }\n};\n\n<\/pre><\/div>\n\n\n<h3 class=\"wp-block-heading\">\ud83d\udd25 \u652f\u6301\u4e24\u79cd\u6a21\u5f0f<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">\u2460 <strong>\u9ed8\u8ba4\uff1a\u5220\u9664\u6309\u94ae<\/strong><\/h4>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;button v-permission=&quot;&#039;user:delete&#039;&quot;&gt;\u5220\u9664&amp;lt;\/button&gt;\n\n<\/pre><\/div>\n\n\n<h4 class=\"wp-block-heading\">\u2461 <strong>\u7981\u7528\u6309\u94ae<\/strong><\/h4>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;button v-permission.disabled=&quot;&#039;user:add&#039;&quot;&gt;\u7f16\u8f91\uff08\u7981\u7528\u6a21\u5f0f\uff09&amp;lt;\/button&gt;\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\u2b50 \u56db\u3001\u5728 main.js \u4e2d\u5168\u5c40\u6ce8\u518c\u6307\u4ee4<\/h1>\n\n\n\n<p><code>main.js<\/code><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nimport { createApp } from &quot;vue&quot;;\nimport App from &quot;.\/App.vue&quot;;\nimport permission from &quot;@\/directives\/permission&quot;;\n\nconst app = createApp(App);\n\n\/\/ \u5168\u5c40\u6ce8\u518c\napp.directive(&quot;permission&quot;, permission);\n\napp.mount(&quot;#app&quot;);\n\n<\/pre><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\u2b50 \u4e94\u3001\u7ec4\u4ef6\u5185\u4f7f\u7528\u793a\u4f8b\uff08\u771f\u5b9e\u9875\u9762\uff09<\/h1>\n\n\n\n<p><code>App.vue<\/code><\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;template&gt;\n  &amp;lt;div class=&quot;box&quot;&gt;\n    &amp;lt;h2&gt;\u6309\u94ae\u6743\u9650\u793a\u4f8b&amp;lt;\/h2&gt;\n\n    &amp;lt;!-- \u7528\u6237\u6ca1\u6709 delete \u6743\u9650 \u2192 \u6309\u94ae\u4f1a\u88ab\u76f4\u63a5\u79fb\u9664 --&gt;\n    &amp;lt;button v-permission=&quot;&#039;user:delete&#039;&quot;&gt;\u5220\u9664\u7528\u6237\uff08\u76f4\u63a5\u79fb\u9664\uff09&amp;lt;\/button&gt;\n\n    &amp;lt;!-- \u7528\u6237\u6ca1\u6709 view \u6743\u9650 \u2192 \u6309\u94ae\u7981\u7528 --&gt;\n    &amp;lt;button v-permission.disabled=&quot;&#039;user:view&#039;&quot;&gt;\u67e5\u770b\u7528\u6237\uff08\u7981\u7528\uff09&amp;lt;\/button&gt;\n\n    &amp;lt;!-- \u7528\u6237\u62e5\u6709 add \u6743\u9650 --&gt;\n    &amp;lt;button v-permission=&quot;&#039;user:add&#039;&quot;&gt;\u65b0\u589e\u7528\u6237\uff08\u5c55\u793a\uff09&amp;lt;\/button&gt;\n  &amp;lt;\/div&gt;\n&amp;lt;\/template&gt;\n\n<\/pre><\/div>\n\n\n<p>\u6548\u679c\uff08\u5047\u8bbe\u7528\u6237\u6743\u9650\u4e3a <code>[\"user:add\", \"user:edit\"]<\/code>\uff09\uff1a<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u6309\u94ae<\/th><th>\u72b6\u6001<\/th><\/tr><\/thead><tbody><tr><td>\u5220\u9664\u6309\u94ae<\/td><td>\u88ab\u9690\u85cf<\/td><\/tr><tr><td>\u67e5\u770b\u6309\u94ae<\/td><td>\u88ab\u7981\u7528<\/td><\/tr><tr><td>\u65b0\u589e\u6309\u94ae<\/td><td>\u6b63\u5e38\u663e\u793a<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\u2b50 \u516d\u3001\u6269\u5c55\u529f\u80fd\uff08\u53ef\u9009\uff09<\/h1>\n\n\n\n<p>\u4f60\u53ef\u4ee5\u6269\u5c55\u66f4\u591a\uff1a<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83d\udd27 \u2460 \u591a\u6743\u9650 OR<\/h2>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;button v-permission=&quot;&#x5B;&#039;user:add&#039;,&#039;user:delete&#039;]&quot;&gt;&amp;lt;\/button&gt;\n\n<\/pre><\/div>\n\n\n<h2 class=\"wp-block-heading\">\ud83d\udd27 \u2461 \u591a\u6743\u9650 AND<\/h2>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;button v-permission.all=&quot;&#x5B;&#039;user:add&#039;,&#039;user:delete&#039;]&quot;&gt;&amp;lt;\/button&gt;\n\n<\/pre><\/div>\n\n\n<h2 class=\"wp-block-heading\">\ud83d\udd27 \u2462 \u6307\u4ee4\u66f4\u65b0\u65f6\u5b9e\u65f6\u751f\u6548<\/h2>\n\n\n\n<p>\u628a <code>mounted<\/code> \u6362\u6210 <code>updated<\/code><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\u2b50 \u4e03\u3001\u6743\u9650\u5224\u65ad\u65b9\u6cd5\u53ef\u5355\u72ec\u62bd\u79bb<\/h1>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nexport function hasPermission(value) {\n  return userStore.permissions.includes(value);\n}\n\n<\/pre><\/div>\n\n\n<p>\u65b9\u4fbf\u5728\u7ec4\u4ef6\u3001API\u3001\u8def\u7531\u5b88\u536b\u4e2d\u590d\u7528\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\ud83c\udf81 \u516b\u3001\u603b\u7ed3\uff08\u53ef\u76f4\u63a5\u653e\u535a\u5ba2\u91cc\uff09<\/h1>\n\n\n\n<p>\u672c\u65b9\u6848\u7279\u70b9\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u5168\u5c40\u53ef\u7528\uff0c\u7ec4\u4ef6\u96f6\u914d\u7f6e<\/li>\n\n\n\n<li>\u652f\u6301\u5220\u9664\u6a21\u5f0f \/ \u7981\u7528\u6a21\u5f0f<\/li>\n\n\n\n<li>\u901a\u8fc7\u7528\u6237\u6743\u9650 store \u5224\u65ad<\/li>\n\n\n\n<li>\u53ef\u6269\u5c55\u591a\u6743\u9650\u903b\u8f91<\/li>\n\n\n\n<li>\u4e0e\u5b9e\u9645\u540e\u53f0\u6743\u9650\u7cfb\u7edf\u9ad8\u5ea6\u517c\u5bb9<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>\u4e0b\u9762\u7ed9\u4f60\u4e00\u4efd Vue 3 \u5c01\u88c5\u5168\u5c40\u81ea\u5b9a\u4e49\u6307\u4ee4\u5b9e\u73b0\u6309\u94ae\u6743\u9650\u63a7\u5236\u7684\u5b8c\u6574\u5b9e\u4f8b\uff082025&#8230; <a class=\"more-link\" href=\"https:\/\/www.52runoob.com\/index.php\/2025\/12\/06\/vue3%e5%b0%81%e8%a3%85%e5%85%a8%e5%b1%80%e8%87%aa%e5%ae%9a%e4%b9%89%e6%8c%87%e4%bb%a4%e5%ae%9e%e7%8e%b0%e6%8c%89%e9%92%ae%e6%9d%83%e9%99%90%e6%8e%a7%e5%88%b6%e5%8a%9f%e8%83%bd%e5%ae%9e%e4%be%8b\/\">Continue Reading &rarr;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[49],"tags":[],"class_list":["post-549","post","type-post","status-publish","format-standard","hentry","category-javascript"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/549","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/comments?post=549"}],"version-history":[{"count":1,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/549\/revisions"}],"predecessor-version":[{"id":550,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/549\/revisions\/550"}],"wp:attachment":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/media?parent=549"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/categories?post=549"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/tags?post=549"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}