Cara untuk membuat komponen secara manual kepada elemen tertentu dalam Vue3

Tukar komponen kepada elemen tersuai

Dokumentasi: Vue dan Komponen Web | Vue.js (vuejs.org)

Vue menyediakan sokongan yang baik untuk Komponen Web. Komponen boleh ditukar kepada elemen tersuai menggunakan defineCustomElement. Anda kemudiannya boleh memasukkannya secara bebas ke dalam nod 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（可选）
  })
)

Selain itu, adalah mungkin untuk menukar SFC (Komponen Fail Tunggal) kepada elemen tersuai.

Dokumentasi: sfc sebagai elemen tersuai

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

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

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

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

Perlu diambil perhatian bahawa defineCustomElement akan menggunakan Shadow DOM untuk memaparkan elemen. Kaedah ini akan menyebabkan pengasingan gaya dan gaya luaran tidak akan dapat digunakan pada bahagian dalam komponen. Jika anda menggunakan pustaka komponen atau bergantung pada beberapa gaya luaran, ingat untuk mengimport gaya ini sekali lagi.

Berbilang contoh aplikasi Vue

Ingat semasa mencipta projek, kami menggunakan createApp untuk mencipta contoh App dan kemudian memasangnya dalam #app . Malah, berbilang contoh Apl, iaitu berbilang aplikasi Vue, boleh wujud dalam persekitaran DOM pada masa yang sama.

Dengan menggunakan ini, anda boleh mencipta tika Apl sekali lagi dan melekapkannya pada elemen DOM tertentu.

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

Dengan cara ini, komponen boleh dipaparkan secara normal. Penyediaan dan suntikan komponen akan menjadi tidak sah kerana ia bukan milik aplikasi asal.

Bagaimana untuk berkomunikasi antara komponen? Anda boleh menggunakan acara tersuai, atau createEventHook |. Selain itu, anda juga boleh memanfaatkan prinsip responsif Vue3, gunakan ref atau reactive untuk mencipta objek responsif yang berasingan, dan kemudian merujuknya dalam komponen berbeza untuk mencapai penyegerakan data dua hala.

Atas ialah kandungan terperinci Cara untuk membuat komponen secara manual kepada elemen tertentu dalam Vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!