Komponente mit CSS-Selektor erstellen?

Question

Ist es möglich, eine Vue-Komponente zu erstellen, indem Sie anstelle des Namens eines benutzerdefinierten HTML-Tags einen CSS-Selektor übergeben? Und ist es wiederum möglich, nicht angepasste HTML-Tags für Vorlagenplatzhalter zu verwenden?

Ich frage, weil ich vorsichtig mit den SEO-Implikationen von benutzerdefinierten HTML-Tags bin.

Answer 1

Zuerst ist es möglich, eine Komponente mit einem Selektor oder dem Element #id zu definieren. Es funktioniert jedoch nicht ganz so, wie Sie denken, wenn ich richtig verstehe, was Sie wollen.

Verfahren nicht weit verbreitet sind oder sogar gut dokumentiert, link & link, aber Sie können verwenden, was als eine x-Vorlage bekannt ist. Sie definieren die Komponente wie folgt.

Vue.component('my-cool-component', { 
    template: '#my-cool-component', //refers to script tag id 
      data() { 
       // 
      }, 
      methods: { 
       // 
      } 
}); 

Dann schließen Sie die aktuelle Vorlage Markup in Ihrem HTML innerhalb eines 'text/x-template' Script-Tag mit der Vorlage ID Set von Ihrer Komponente.

<script type="text/x-template" id="my-cool-component"> 
    <section> 
     <h1>Title</h1> 
     <p>...</p> 
    </section> 
</script> 

Im Fall von oben können Sie nur Standard-HTML-Tags verwenden.

jedoch weiter, um den zweiten Teil Ihrer Frage zu klären, sollten Sie in der Lage sein, benutzerdefinierte HTML-Tags zu verwenden, wenn in Vorlagen ohne Sorge Ihre Komponenten zu benennen, da diese durch Vue.js analysiert werden aus während der Wiedergabe. Zum Beispiel sind, wenn Sie alles, was Sie in der Komponente Markup direkt anstatt Literale mit Vorlage Vorlage zu schreiben, wie folgt,

Vue.component('my-cool-component', { 
    template: `<section> 
        <h1>Title</h1> 
        <p>...</p> 
       </section>', 
      data() { 
       // 
      }, 
      methods: { 
       // 
      } 
}); 

dann in Ihrer Seite Markup, wenn Sie auch Ihre eigenen HTML-Element-Tags <my-cool-component></my-cool-component> Vue werden die Tags entfernen und nur Rendern Sie das Vorlagen-Markup.

<section> 
    <h1>Title</h1> 
    <p>...</p> 
</section> 

Answer 2

Nicht sicher, ob ich Ihre Fragen richtig, aber Vuejs nicht tatsächlich diese benutzerdefinierten Tag wie Vorlage-Platzhalter rendern. Es wird alle Template-Platzhalter mit ihrer tatsächlichen Vorlage transformieren. Siehe das folgende Beispiel:

CustomComponent.vue

<template><div class="child">Hello World</div></template> 

<script> 
export default { 
    name: 'CustomComponent' 
} 
</script> 

Geordnete Komponente:

<template> 
    <div class="parent"><custom-component></custom-component></div> 
</template> 

<script> 
import CustomComponent from './CustomComponent' 

export default { 
    components: { 
    CustomComponent 
    } 
} 
</script> 

Dieses eine dom machen wird, die so etwas wie dieses

<div class="parent"><div class="child">Hello World</div></div> 

sieht Wenn Sie wirklich sind besorgt über CEO würde ich empfehlen, in server-side rendering zu suchen. Andernfalls werden alle Ihre Ansichtskomponenten mithilfe von JavaScript auf dem Client gerendert. Nicht sicher, ob die Suchmaschinen-Crawler Javascript ausführen oder ob sie tatsächlich warten, bis die Seite gerendert wird.