{"id":198,"date":"2026-07-08T09:46:17","date_gmt":"2026-07-08T01:46:17","guid":{"rendered":"https:\/\/yykcj.com\/?p=198"},"modified":"2026-07-08T09:46:17","modified_gmt":"2026-07-08T01:46:17","slug":"web-components-%e4%b8%8e-react-vue-angular-%e6%a1%86%e6%9e%b6%e9%9b%86%e6%88%90%e5%ae%9e%e6%88%98%e6%8c%87%e5%8d%97","status":"publish","type":"post","link":"https:\/\/yykcj.com\/?p=198","title":{"rendered":"Web Components \u4e0e React\/Vue\/Angular \u6846\u67b6\u96c6\u6210\u5b9e\u6218\u6307\u5357"},"content":{"rendered":"

\u5f15\u8a00<\/h2>\n

Web Components \u662f\u4e00\u7ec4\u539f\u751f\u6d4f\u89c8\u5668 API\uff0c\u5141\u8bb8\u5f00\u53d1\u8005\u521b\u5efa\u53ef\u590d\u7528\u7684\u81ea\u5b9a\u4e49\u5143\u7d20\u3002\u7136\u800c\uff0c\u5728\u5b9e\u9645\u9879\u76ee\u4e2d\uff0c\u6211\u4eec\u5f80\u5f80\u9700\u8981\u5728 React\u3001Vue \u6216 Angular \u7b49\u6846\u67b6\u4e2d\u4f7f\u7528\u8fd9\u4e9b\u7ec4\u4ef6\u3002\u7531\u4e8e\u6846\u67b6\u7684\u865a\u62df DOM \u548c\u4e8b\u4ef6\u7cfb\u7edf\u4e0e\u539f\u751f\u5143\u7d20\u5b58\u5728\u5dee\u5f02\uff0c\u76f4\u63a5\u4f7f\u7528\u53ef\u80fd\u4f1a\u9047\u5230\u6570\u636e\u7ed1\u5b9a\u5931\u6548\u3001\u4e8b\u4ef6\u4e22\u5931\u7b49\u95ee\u9898\u3002\u672c\u6587\u5c06\u624b\u628a\u624b\u6559\u4f60\u5982\u4f55\u6b63\u786e\u96c6\u6210 Web Components \u4e0e\u4e09\u5927\u6846\u67b6\uff0c\u5e76\u5206\u4eab\u6700\u4f73\u5b9e\u8df5\u3002<\/p>\n

1. \u521b\u5efa\u4e00\u4e2a\u7b80\u5355\u7684 Web Component<\/h2>\n

\u9996\u5148\uff0c\u6211\u4eec\u521b\u5efa\u4e00\u4e2a\u540d\u4e3a <\/code> \u7684 Web Component\uff0c\u7528\u4e8e\u5c55\u793a\u7528\u6237\u4fe1\u606f\u3002<\/p>\n

\n\/\/ user-card.js\nclass UserCard extends HTMLElement {\n  constructor() {\n    super();\n    this.attachShadow({ mode: 'open' });\n    this._name = '';\n    this._age = 0;\n  }\n\n  static get observedAttributes() {\n    return ['name', 'age'];\n  }\n\n  attributeChangedCallback(name, oldValue, newValue) {\n    if (name === 'name') this._name = newValue;\n    if (name === 'age') this._age = newValue;\n    this.render();\n  }\n\n  connectedCallback() {\n    this.render();\n  }\n\n  render() {\n    this.shadowRoot.innerHTML = `\n      <style>\n        .card { border: 1px solid #ccc; padding: 10px; border-radius: 8px; }\n        .name { font-weight: bold; }\n        .age { color: #666; }\n      <\/style>\n      <div class="card">\n        <div class="name">${this._name}<\/div>\n        <div class="age">${this._age} years old<\/div>\n        <button id="greet">Greet<\/button>\n      <\/div>\n    `;\n    this.shadowRoot.querySelector('#greet').addEventListener('click', () => {\n      this.dispatchEvent(new CustomEvent('greet', { detail: this._name }));\n    });\n  }\n}\n\ncustomElements.define('user-card', UserCard);\n<\/code><\/pre>\n
\u8be5\u7ec4\u4ef6\u63a5\u6536 name<\/code> \u548c age<\/code> \u5c5e\u6027\uff0c\u5e76\u89e6\u53d1 greet<\/code> \u81ea\u5b9a\u4e49\u4e8b\u4ef6\u3002<\/p>\n
2. \u5728 React \u4e2d\u4f7f\u7528 Web Components<\/h2>\n
React \u5bf9 Web Components \u7684\u652f\u6301\u8f83\u4e3a\u53cb\u597d\uff0c\u4f46\u9700\u8981\u6ce8\u610f\u5c5e\u6027\u4f20\u9012\u548c\u4e8b\u4ef6\u5904\u7406\u3002<\/p>\n
2.1 \u5b89\u88c5\u4e0e\u5f15\u5165<\/h3>\n
\nnpm install --save user-card\n# \u6216\u76f4\u63a5\u5f15\u5165\u811a\u672c\n<\/code><\/pre>\n
\u5728 React \u7ec4\u4ef6\u4e2d\u5f15\u5165\uff1a<\/p>\n
\n\/\/ \u5728\u5165\u53e3\u6587\u4ef6\u6216\u7ec4\u4ef6\u4e2d\u5f15\u5165\nimport 'user-card';\n<\/code><\/pre>\n
2.2 \u4f7f\u7528\u7ec4\u4ef6<\/h3>\n
\nimport React, { useRef, useEffect } from 'react';\n\nfunction App() {\n  const cardRef = useRef(null);\n\n  useEffect(() => {\n    const card = cardRef.current;\n    const handleGreet = (e) => {\n      alert(`Hello, ${e.detail}!`);\n    };\n    card.addEventListener('greet', handleGreet);\n    return () => card.removeEventListener('greet', handleGreet);\n  }, []);\n\n  return (\n    <div>\n      {\/* \u6ce8\u610f\uff1aReact \u4e2d\u5c5e\u6027\u540d\u9700\u4f7f\u7528\u9a7c\u5cf0\uff0c\u4f46 Web Components \u5c5e\u6027\u540d\u662f kebab-case *\/}\n      <user-card ref={cardRef} name="Alice" age={25} \/>\n    <\/div>\n  );\n}\n\nexport default App;\n<\/code><\/pre>\n
\u6ce8\u610f<\/strong>\uff1a<\/p>\n
    \n
  • \u5c5e\u6027 name<\/code> \u548c age<\/code> \u76f4\u63a5\u4f5c\u4e3a HTML \u5c5e\u6027\u4f20\u9012\uff0cReact \u4f1a\u81ea\u52a8\u5904\u7406\u5b57\u7b26\u4e32\u548c\u6570\u5b57\u3002<\/li>\n
  • \u4e8b\u4ef6\u76d1\u542c\u5fc5\u987b\u4f7f\u7528\u539f\u751f addEventListener<\/code>\uff0c\u56e0\u4e3a React \u7684\u5408\u6210\u4e8b\u4ef6\u65e0\u6cd5\u76f4\u63a5\u6355\u83b7 Web Component \u7684\u81ea\u5b9a\u4e49\u4e8b\u4ef6\u3002<\/li>\n
  • \u5982\u679c\u5c5e\u6027\u662f\u5bf9\u8c61\u6216\u6570\u7ec4\uff0c\u9700\u8981\u901a\u8fc7 JSON.stringify<\/code> \u8f6c\u4e3a\u5b57\u7b26\u4e32\uff0c\u6216\u5728 attributeChangedCallback<\/code> \u4e2d\u89e3\u6790\u3002<\/li>\n<\/ul>\n
    2.3 \u4f20\u9012\u590d\u6742\u6570\u636e<\/h3>\n
    \n<user-card user={JSON.stringify({name: 'Bob', age: 30})} \/>\n<\/code><\/pre>\n
    \u5728 Web Component \u4e2d\u89e3\u6790\uff1a<\/p>\n
    \nattributeChangedCallback(name, oldValue, newValue) {\n  if (name === 'user') {\n    const user = JSON.parse(newValue);\n    this._name = user.name;\n    this._age = user.age;\n  }\n  this.render();\n}\n<\/code><\/pre>\n
    3. \u5728 Vue \u4e2d\u4f7f\u7528 Web Components<\/h2>\n
    Vue 3 \u5bf9 Web Components \u6709\u5f88\u597d\u7684\u652f\u6301\uff0c\u4f46\u9700\u8981\u914d\u7f6e isCustomElement<\/code> \u6216\u4f7f\u7528 vue-web-component-wrapper<\/code>\uff08\u4e0d\u63a8\u8350\uff09\u3002<\/p>\n
    3.1 \u914d\u7f6e Vue \u5ffd\u7565\u81ea\u5b9a\u4e49\u5143\u7d20<\/h3>\n
    \u5728 vite.config.js<\/code> \u4e2d\uff1a<\/p>\n
    \nimport { defineConfig } from 'vite';\nimport vue from '@vitejs\/plugin-vue';\n\nexport default defineConfig({\n  plugins: [\n    vue({\n      template: {\n        compilerOptions: {\n          isCustomElement: (tag) => tag.startsWith('user-'),\n        },\n      },\n    }),\n  ],\n});\n<\/code><\/pre>\n
    3.2 \u4f7f\u7528\u7ec4\u4ef6<\/h3>\n
    \n<template>\n  <div>\n    <user-card :name="userName" :age="userAge" @greet="handleGreet" ref="cardRef" \/>\n  <\/div>\n<\/template>\n\n<script setup>\nimport { ref, onMounted, onUnmounted } from 'vue';\nimport 'user-card';\n\nconst userName = ref('Alice');\nconst userAge = ref(25);\nconst cardRef = ref(null);\n\nconst handleGreet = (e) => {\n  alert(`Hello, ${e.detail}!`);\n};\n\n\/\/ \u6ce8\u610f\uff1aVue 3 \u7684 @greet \u53ef\u4ee5\u76f4\u63a5\u7ed1\u5b9a\u81ea\u5b9a\u4e49\u4e8b\u4ef6\uff0c\u4f46\u9700\u8981\u7ec4\u4ef6\u89e6\u53d1 CustomEvent\n\/\/ \u5982\u679c\u4e8b\u4ef6\u540d\u662f kebab-case\uff0cVue \u4f1a\u81ea\u52a8\u8f6c\u6362\n<\/script>\n<\/code><\/pre>\n
    \u6ce8\u610f<\/strong>\uff1a<\/p>\n