Создать компонент с помощью селектора CSS?

Question

Можно ли создать компонент Vue, передавая селектор CSS вместо имени пользовательского тега HTML? И, в свою очередь, возможно ли использовать нестандартные теги HTML для шаблонных заполнителей?

Я спрашиваю, потому что я с осторожностью отношусь к последствиям SEO пользовательских тегов HTML.

Answer 1

Не уверен, что я правильно понял ваши вопросы, но vuejs фактически не отображает эти пользовательские теги как заполнители шаблонов. Это преобразует все шаблоны-заполнители с их фактическим шаблоном. Смотрите следующий пример:

CustomComponent.vue

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

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

Родительский компонент:

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

<script>
import CustomComponent from './CustomComponent'

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

Это сделает дом, который выглядит примерно так

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

Если вы действительно беспокоитесь о СЕО, я бы порекомендовал изучить рендеринг на стороне сервера. В противном случае все ваши компоненты представления будут отображаться с использованием выполнения JavaScript на клиенте. Не уверен, что сканеры поисковых систем выполняют javascript или даже если они это делают, сколько времени они будут ждать, пока ваша страница будет отображаться.

Answer 2

Во-первых, да, можно определить компонент, используя селектор или элемент #id, чтобы быть конкретным. Однако, это не совсем так, как вы думаете, если я правильно понимаю, что вы хотите.

Этот метод не очень широко используется или даже хорошо документирован, ссылка и ссылка, но вы можете использовать так называемый x-шаблон. Вы определяете компонент следующим образом.

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

Затем вы включаете фактическую разметку шаблона в ваш html в теге сценария 'text/x-template' с идентификатором шаблона, установленным из вашего компонента.

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

В случае выше, вы можете использовать только стандартные HTML-теги.

Однако, чтобы уточнить вторую часть вашего вопроса, вы должны иметь возможность использовать собственные теги html при именовании ваших компонентов в шаблонах, не беспокоясь о том, что они анализируются Vue.js во время рендеринга. Например, если вы должны написать всю свою разметку шаблона непосредственно в компоненте, а не использовать литералы шаблона следующим образом,

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

Затем в вашей разметке страницы, когда вы включаете свои собственные теги HTML-элементов <my-cool-component></my-cool-component> Vue удалит теги и отобразит только разметку шаблона.

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