Özelleşmiş Eleman API

Özelleşmiş Eleman API

defineCustomElement()

Bu yöntem, defineComponent ile aynı argümanı kabul eder, ancak bunun yerine yerel Özelleşmiş Eleman sınıf yapıcısını döndürür.

• Tür

  function defineCustomElement(
    component:
      | (ComponentOptions & CustomElementsOptions)
      | ComponentOptions['setup'],
    options?: CustomElementsOptions
  ): {
    new (props?: object): HTMLElement
  }
  
  interface CustomElementsOptions {
    styles?: string[]
  
    // aşağıdaki seçenekler 3.5+ içindir
    configureApp?: (app: App) => void
    shadowRoot?: boolean
    nonce?: string
  }

  Tür, okunabilirlik için basitleştirilmiştir.

• Ayrıntılar

  Normal bileşen seçeneklerine ek olarak, defineCustomElement() ayrıca özelleşmiş elemanlara özgü bazı seçenekleri destekler:

  bilgi

  • styles: elemanın gölge köküne enjekte edilmesi gereken CSS sağlayan iç içe geçmiş CSS dizelerinin bir dizisi.

  • configureApp : özelleşmiş eleman için Vue uygulama örneğini yapılandırmak için kullanılabilecek bir fonksiyon.

  • shadowRoot : boolean, varsayılan olarak true'dur. Özelleşmiş elemanı gölge kök olmadan render etmek için false olarak ayarlayın. Bu, özelleşmiş eleman SFC'lerinde `` etiketinin artık kapsüllenmeyeceği anlamına gelir.

  • nonce : string, sağlanırsa gölge köküne enjekte edilen stil etiketlerinde nonce niteliği olarak ayarlanır.

  Bu seçeneklerin bileşenin kendisinin bir parçası olarak iletilmek yerine, ikinci bir argüman olarak da iletilebileceğini unutmayın:

  import Element from './MyElement.ce.vue'
  
  defineCustomElement(Element, {
    configureApp(app) {
      // ...
    }
  })

  Dönüş değeri, customElements.define() kullanılarak kaydedilebilen bir özelleşmiş eleman yapıcısıdır.

• Örnek

  import { defineCustomElement } from 'vue'
  
  const MyVueElement = defineCustomElement({
    /* bileşen seçenekleri */
  })
  
  // Özelleşmiş elemanı kaydet.
  customElements.define('my-vue-element', MyVueElement)

• Ayrıca bakınız

  • Kılavuz - Vue ile Özelleşmiş Elemanlar Oluşturma

  • Ayrıca defineCustomElement() kullanılırken özel yapılandırma gerektiğini unutmayın.

useHost()

Geçerli Vue özelleşmiş elemanının ana elemanını döndüren bir Composition API yardımcı işlevi.

useShadowRoot()

Geçerli Vue özelleşmiş elemanının gölge kökünü döndüren bir Composition API yardımcı işlevi.

this.$host

Geçerli Vue özelleşmiş elemanının ana elemanını sağlayan bir Options API özelliği.