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

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

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
    }
})

}

Vue：组件/模板作为道具

2 个答案: