Vue:组件/模板作为道具

Question

我目前正在努力学习vue并努力学习整个组件概念.

假设我有一些定义选项卡的组件(如浏览器选项卡).

这个组件有一个叫做的道具name.

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

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

但是,让我们说事情需要更复杂一些.例如,您不仅希望名称是字符串,而且是常规HTML.好的,所以,您可以在v-html指令中使用prop 并使用tab组件,如下所示:

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

由于所有引用,我花了一段时间才弄明白.有没有办法逃脱这个逃脱地狱(双关语完全打算)？

我怎么能把它带到它自己的代码片段/模板中呢？

如果我们让它变得更复杂怎么办 - 比如我们要求道具是一个vue组件？

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

最后一个在许多级别上都是无效的,其中最重要的是引用的混乱.

我怎么做到这一点？什么是最好的方法？

Answer 1

如果你试图在道具中注入html,你应该真正考虑使用插槽.

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

Answer 2

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

索引.vue

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

您可以使用 {{name}} 在该模板中使用 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 导入到项目中时，概念保持不变。组件可以包含所有内容，从带内部的简单 div<p>到完整页面。这个组件系统非常强大，可以让事情井井有条。

如果没有 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
    }
})

}