Vue：组件/模板作为道具

Question

我目前正在努力学习 vue 并在整个组件概念上苦苦挣扎。

假设我有一些定义选项卡的组件（如浏览器选项卡）。

这个组件有一个叫做name的prop。

所以你可能会像这样使用组件：

<tab :name="tab.display_name"></tab>

但是，可以说事情需要更复杂一些。例如，您不仅希望名称是字符串，还希望是常规 HTML。好的，所以，你可以在 v-html 指令中使用 prop 并像这样使用 tab 组件：

<tab :name="'<span class=\'fancy-styling\'>' + tab.display_name + '</span>'"></tab>

由于所有引用，我花了一段时间才弄清楚。有没有办法逃离这个逃生地狱（双关语完全是故意的）？

我怎样才能把它放到它自己的 sn-p/模板中？

如果我们让它变得更复杂——比如说我们要求 prop 是一个 vue 组件呢？

<tab :name="'<my-custom-component @click="onClick()">' + tab.display_name + '</my-custom-component>'"></tab>

最后一个在多个级别上是无效的，其中最重要的是引用的混乱。

我将如何做到这一点？最好的方法是什么？

Answer 1

如果您尝试在 props 中注入 html，那么您应该考虑使用插槽。

https://vuejs.org/v2/guide/components-slots.html

Answer 2

使用组件的全部意义在于创建关注点分离。在一行中定义所有分层组件完全违背了这个目的。创建三个单独的组件。像这样的一个容器组件。

index.vue

<template>
    <tab :name="mycoolname"></tab>
</template>
<script>
    import tab from tab.vue
    export default {
        components: {
            tab
        }
</script>

您可以使用 {{name}} 在该模板中使用的名称道具。比在选项卡组件中，像这样：

tab.vue

<template>
    <h1>{{name}}</h1>
    <my-custom-component @click="doStuff()"></my-custom-component>
</template>
<script>
    import my-custom-component from my-custom-component.vue
    export default {
        props: [
            'name'
        ],
        components: {
            my-custom-component
        },
        methods: {
            doStuff () {
                console.log('hooray this totally works')
            }
</script>

我在这里使用单独的构建文件，但是当您将 vue 导入项目时，概念保持不变。组件可以包含所有内容，从内部带有 <p> 的简单 div 到整页。这个组件系统非常强大，可以让事情井井有条。

如果没有 webpack，它看起来像这样：

var myCustomComponent = { 
    template: `fancyHTML`
}

var Tab= {
    components: {
        'my-custom-component': myCustomComponent 
    },
    template: `even more fancy html containing <my-custom-component>`

new Vue({
   el: '#app'
   components: {
      'tab': Tab
    }
})

}