使用CSS选择器创建组件？

问题描述：

是否可以通过传递CSS选择器而不是自定义HTML标记的名称来创建Vue组件？反过来，是否可以为模板占位符使用非自定义HTML标记？使用CSS选择器创建组件？

我问，因为我对自定义HTML标记的SEO影响警惕。

答

首先是可以使用选择器或元素#id定义一个组件是特定的。但是，如果我正确理解你想要的东西，它就不会像你所想的那样工作。

该方法没有广泛使用，甚至没有很好的文档记录，link & link，但你可以使用所谓的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标签。

然而，以进一步澄清你的问题的第二部分，你应该能够在模板命名您的组件时，无需担忧，因为这些都是由Vue.js渲染过程中解析出使用自定义的HTML标签。例如，如果你写你模板直接而不是使用模板文字如下组件标记，

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>

答

不知道如果我得到你的问题是正确的，但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>

，这会使得一个DOM，看起来像这样

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

的东西如果你真的关心首席执行官我会建议调查server-side rendering。否则，所有视图组件都将在客户端上使用JavaScript执行呈现。不确定搜索引擎抓取工具是否执行JavaScript，甚至是否执行，他们将等待页面呈现多久。

使用CSS选择器创建组件？

相关推荐