Vue：组件/模板作为道具

Posted 2023-02-23

【中文标题】Vue：组件/模板作为道具

【英文标题】：Vue: Components/templates as props

【发布时间】：2018-09-23 01:28:54

【问题描述】：

我目前正在努力学习 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>

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

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

【问题讨论】：

<tab :name=`<span class="fancy-styling">$tab.display_name</span>`></tab> 使用为解决转义和连接地狱而创建的 ES6 模板文字。

我一般使用 webpack 和 es6（不确定是哪个预设），编译失败。但是以下方法有效：<tab :name="`<span class='fancy-styling'>$tab.display_name</span>`"></tab> 所以我不会说这是逃避任何地狱，只是延迟了问题。

是的，不小心把外引号去掉了。

【参考方案1】：

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

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

【参考方案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
    
)

【讨论】：

如果内容不同怎么办？例如。您有多个选项卡，有时选项卡应显示您的自定义组件，有时应显示自定义 html，有时只是一个简单的名称？

取决于您需要的灵活性。如果只有这么多选项，您可以通过为某个选项卡创建组件并使用 v-if 或 v-for 的某种组合来做一些事情。如果您想保持充分的灵活性或通过 props 注入 html，请按照 @zom 的建议使用插槽。