Vue 3 神奇技巧：让模板复用达到极致

2023-07-0208:49:18WEB前端开发Comments581 views字数 2534阅读模式

引出

在vue的日常开发当中，我们可能会遇到这样的一种情况：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49204.html

某一部分的模版需要重复利用，但又不至于到新开1个组件的地步。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49204.html

比如：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49204.html

<template> 
    <div v-for="item in list">
        // 条件渲染
        <div v-if="isCase1(item.id)" class="case1Class ...">
            <h2>{{ item.title }}</h2> 
            <p class="...">{{ item.content }}</p> 
            <span> {{ item.cases }} </span>
        </div>
        <p v-else-if="isCase2(item.id)" class="case2Class ...">{{ item.content }}</p> 
        <span v-else="isCase3(item.id)"> {{ item.cases }} </span>
        // 条件可能有更多....
    </div> 
</template>

这里面的<p> <span> 都是可以复用的，但为此新开俩组件又没有必要。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49204.html

那么又有什么解决方案呢？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49204.html

来自react的提示

在react 当中啊，碰到这种情况，可以定义1个局部的函数式组件文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49204.html

示例：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49204.html

function Com ()  { 
    // 局部组件
    const  ReuseP = ({content,className})=> (<p className={`${className} ...其余复用class`}>{ content }</p> )
    
    return (
        list.map(i=>{
            if(isCase1(i.id)){
                return (
                    <div>
                        {/* ... */}
                        {/* 在这里去复用 */}
                        <ReuseP  {...i}  className="case2Class" />
                    </div>
                )
            }
        })
    )
}

回到vue

那么在Vue当中能不能实现呢？答案显然是可以的文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49204.html

其实在Vue3当中，可以支持在.vue文件即SFC当中去使用jsx/tsx语法的文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49204.html

看看文档文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49204.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49204.html

是不是很熟悉，这不就是react当中的函数式组件么文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49204.html

也就是说，可以将上面的例子改写成这样文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49204.html

<template> 
    <div v-for="item in list">
        // 条件渲染
        <div v-if="isCase1(item.id)" class="case1Class ...">
            <h2>{{ item.title }}</h2> 
-           <p class="...">{{ item.content }}</p>
+           <reuseP v-bind="item"/> 
            <span> {{ item.cases }} </span>
        </div>
-        <p v-else-if="isCase2(item.id)" class="case2Class ...">{{ item.content }}</p> 
+        <reuseP v-else-if="isCase2(item.id)" v-bind:content="item.content" v-bind:your-class="'case2Class'" ></reuseP>
        <span v-else> {{ item.cases }} </span>
        // 条件可能有更多....
    </div> 
</template>

+ // ⚠️ 注意这里的lang
+ <script setup lang="jsx">
+    const reuseP = ({ content }) => (
+     <p className={`${args['your-class']} ...其余复用class`}>{ content }</p>
+ )
+ </script>

可以清晰的看到在.vue文件即Vue但文件组件（SFC）里面通过jsx去实现了一个组件内的小组件，进而达到了组件内模版复用的效果。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49204.html

ps: 当然这里只是举例了可以复用<p>的例子，你也可以更加优雅的去实现，比如把整个v-for都用jsx写一下文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49204.html

大概的代码结构会是这样文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49204.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49204.html

当然，这里只是给大家提供一个思路，jsx与template的结合是相当灵活的，不过相信聪明的看官们能够轻松应对。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49204.html

也许有看官还不了解jsx

回顾

首先回顾一下vue模版语法的编译产物文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49204.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49204.html

它其实是将模版也解析成渲染函数的形式文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49204.html

这里的createElementVNode其实就是h函数，作用是创建VNode文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49204.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49204.html

那么整一个渲染函数的作用就是结合 上下文对象 生成VNode文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49204.html

VNode就是用对象去描述DOM节点（WEB端）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49204.html

比如这样一个真实DOM文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49204.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49204.html

对应的虚拟VNode的核心描述文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/49204.html

const vnode = {
  tag: 'div', // 标签名为 'div'
  data: {},   // 无属性、样式和事件等信息
  children: [
    {
      tag: undefined, // 文本节点没有标签名
      data: {},       // 无属性、样式和事件等信息
      children: undefined,
      text: 'Hello JetTsang' // 文本内容为 'Hello JetTsang'
    }
  ],
  text: undefined，
  //。。。省略
};