Vue3 で指定された要素にコンポーネントを手動でレンダリングする方法

コンポーネントをカスタム要素に変換する

ドキュメント: Vue および Web コンポーネント | Vue.js (vuejs.org)

Vue は Web コンポーネントを適切にサポートします。コンポーネントは、defineCustomElement を使用してカスタム要素に変換できます。その後、それを DOM ノードに自由に挿入できます。

import { defineCustomElement } from 'vue'

const MyVueElement = defineCustomElement({
  // 这里是同平常一样的 Vue 组件选项
  props: {},
  emits: {},
  template: `...`,

  // defineCustomElement 特有的：注入进 shadow root 的 CSS
  styles: [`/* inlined css */`]
})

// 注册自定义元素
// 注册之后，所有此页面中的 `<my-vue-element>` 标签
// 都会被升级
customElements.define(&#39;my-vue-element&#39;, MyVueElement)

// 你也可以编程式地实例化元素：
// （必须在注册之后）
document.body.appendChild(
  new MyVueElement({
    // 初始化 props（可选）
  })
)

さらに、SFC (シングル ファイル コンポーネント) をカスタム要素に変換することもできます。

ドキュメント: カスタム要素としての sfc

import { defineCustomElement } from 'vue'
import Example from './Example.ce.vue'

console.log(Example.styles) // ["/* 内联 css */"]

// 转换为自定义元素构造器
const ExampleElement = defineCustomElement(Example)

// 注册
customElements.define('my-example', ExampleElement)

defineCustomElement は要素のレンダリングに Shadow DOM を使用することに注意してください。この方法ではスタイルが分離され、外部スタイルをコンポーネントの内部に適用できなくなります。コンポーネント ライブラリを使用する場合、または一部の外部スタイルに依存する場合は、忘れずにこれらのスタイルを再度インポートしてください。

Vue の複数のアプリケーション インスタンス

プロジェクトの作成時に、createApp を使用して App インスタンスを作成したことを思い出してください。 #app にマウントされています。実際、複数の App インスタンス、つまり複数の Vue アプリケーションが DOM 環境に同時に存在できます。

これを使用すると、App インスタンスを再度作成し、特定の DOM 要素にマウントできます。

import YouComponent from "./YouComponent.vue";  
  
// 创建一个新的 Vue 应用  
const app = createApp(YouComponent);  
// 将应用挂载到自定义的 DOM 元素上  
app.mount("#you-element");

このようにして、コンポーネントは正常にレンダリングできます。コンポーネントの Provide および Inject は、元のアプリケーションに属していないため、無効になります。

コンポーネント間で通信するにはどうすればよいですか?カスタム イベント、または createEventHook | VueUse を使用できます。さらに、Vue3 の応答原理を使用して、ref または reactive を使用して別の応答オブジェクトを作成し、それらを別のコンポーネントで参照して双方向データを実現することもできます。 。

以上がVue3 で指定された要素にコンポーネントを手動でレンダリングする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。