Vue怎么通过JSX动态渲染组件

news2024/11/26 21:35:28

一、明确需求

有一组数组结构如下:

const arr = [ 
  { tag: 'van-field' },  // 输入框
  { tag: 'van-cell' },   // 弹出层
  { tag: 'van-stepper' } // 步进器
]

 想通过循环arr,拿到tag渲染对应的组件。

 

下面我们分析如何写才是最优。

二、进行分析

2.1 v-if走天下

我们可以写一个v-for去循环arr数组,然后通过v-if去判断tag,渲染对应的组件类型。

这样子写不是不可以,只不过扩展性不好,每次加一个标签,模板就要再加一个v-if。

我相信很多人起初都是这样写。

但这不是我们优雅人该写的代码。

2.2 动态渲染组件标签

我们能不能根据tag的标签来渲染出真正的标签。

关键是循环内,怎么根据遍历的tag去渲染出真正的组件。

<van-cell  v-for="(cell, cellKey) in arr" :key="cellKey" >
      <!-- 动态渲染  -->
</van-cell>

 有请今天的主角JSX上场。

 

2.3 JSX动态渲染组件

父组件

<van-cell  v-for="(cell, cellKey) in arr" :key="cellKey" >
  <!-- 用jsx动态渲染  -->
  <RendTag :cell="cell" />
</van-cell>
const arr = [ 
  { tag: 'van-field' },  // 输入框
  { tag: 'van-cell' },   // 弹出层
  { tag: 'van-stepper' } // 步进器
]

子组件RendTag.vue

<script>
const AssemblyRend = {
  name: "assembly-rend",
  props: ["cell"],
  data() {
    return {
      input: "",
    };
  },
  methods: {
    onClick() {
      this.$emit("changeTag", this.input);
    },
  },
  computed:{
    itemVal:{
      get(){
        return this.cell.value
      },
      set(v){
        this.cell.value = v
      }
    }
  },
  render() {
    const { cell } = this; // 解构
    const assembly = cell.tag;  // 这里就是我们动态渲染组件的核心 
    return (
        <assembly
          v-model={this.itemVal}
          placeholder={cell.placeholder}
          min={cell.min}
          onClick={this.onClick}
        >
        </assembly>
      );
  },
};
export default {
  name: "RendTag",
  props: {
    cell: {
        type: Object,
        default:()=>{
            return {
                {
                    "title": "能否输入",
                    placeholder: '请输入姓名',
                    "value": "name",
                    "tag": "van-switch",
                }
            }
        }
    },
  },
  methods: {
    changeTag(val) {},
  },
  render() {
    const { cell } = this; // 解构
    return (
      <div class="rendTag-content">
        <AssemblyRend
          cell={cell}
          onChangeTag={this.changeTag}
        ></AssemblyRend>
      </div>
    );
  },
};
</script>

我们利用JSX的render可以写JavaScript返回组件,来实现我们动态渲染标签。

render相当于我们vue中的模板。

于是渲染出的效果如下:根据tag渲染成真正的组件

我们用普通的组件,无法像JSX一样渲染成我们想要的组件。 

 

其实这两篇是有一定的挂钩的,只不过我在这里拆开了需求。

主要也是方便朋友们阅读理解。

三、vue中如何使用JSX

借着该需求,我们恶补一下JSX。

3.1 是什么?

JSX 是一种 Javascript 的语法扩展,JSX = Javascript + XML,即在 Javascript 里面写 XML,因为 JSX 的这个特性,所以他即具备了 Javascript 的灵活性,同时又兼具 html 的语义化和直观性。

活度强的部分组件可以用JSX来代替(比如以上需求);
整个工程没有必要都使用JSX。

3.2 基本用法

3.2.1 函数式组件

我们在组件中,也可以嵌入ButtonCounter组件。

const ButtonCounter = {
  name: "button-counter",
  props: ["count"],
  methods: {
    onClick() {
      this.$emit("changeNum", this.count + 1);
    }
  },
  render() {
    return <button onClick={this.onClick}>数量:{this.count}</button>;
  }
};
export default {
  name: "HelloWorld",
  props: {
    msg: String
  },
  data() {
    return {
      count: 0
    };
  },
  methods: {
    // 改变button按钮数量
    changeNum(val) {
      this.count = val;
    }
  },
  render() {
    const { count } = this; // 解构
    return (
      <div class="hello-world-content">
        <ButtonCounter style={{ marginTop: "20px" }} count={count} onChangeNum={this.changeNum}></ButtonCounter>
      </div>
    );
  }
};

 

3.2.2 普通属性、行内样式、动态class与style

可以看到,其实和vue的模板写法基本一致,只不过要注意的是花括号;

在vue的模板是要写两对花括号,而在JSX只需要写一对

export default {
  name: "HelloWorld",
  props: {
    msg: String
  },
  data() {
    return {
      count: 0,
      text: "Hello World!",
      msgClass: "msg-class",
      isGreen: true
    };
  },
  render() {
    const { count, text } = this; // 解构
    return (
      <div class="hello-world-content">
        <p class={this.msg ? this.msgClass : ""}>动态绑定class</p>
        <p style={this.isGreen ? "color: green" : ""}>动态绑定style</p>
      </div>
    );
  }
};

 

3.2.3 常用指令

v-html、v-if、v-for、v-model常用指令在JSX中无法使用,需要使用其他方式来实现。

v-html

在JSX中,如果要设置DOM的innerHTML,需要用到domProps

组件使用:

<HelloWorld 
   msg="<div class='custom-div'>这是自定义的DOM</div>"> 
</HelloWorld>

组件代码:

export default {
  name: "HelloWorld",
  props: {
    msg: String
  },
  data() {
    return {};
  },
  methods: {},
  render() {
    return <div domPropsInnerHTML={this.msg}></div>;
  }
};

渲染DOM结果:

 

v-for

使用map来实现:

render() {
  const list = [1,2,3]
  return( 
    <div>
      { list.map(item => <button>按钮{item}</button>) }
    </div>
  )
}

v-if

简单示例:用三元

render() {
    const bool = false;
    return <div>{bool ? <button>按钮1</button> : <button>按钮2</button>}</div>;
}

复杂示例:直接用JS

render() {
  let num = 3
  if(num === 1){ return( <button>按钮1</button> ) }
  if(num === 2){ return( <button>按钮2</button> ) }
  if(num === 3){ return( <button>按钮3</button> ) }
}

v-model

直接使用:<input v-model={this.value}>

export default {
  name: "HelloWorld",
  props: {
    msg: String
  },
  data() {
    return {
      value: "abc"
    };
  },
  watch: {
    value(val) {
      console.log("this.model内容:" + val);
    }
  },
  methods: {},
  render() {
    return (
      <div>
        <input v-model={this.value} placeholder="普通文本" />
      </div>
    );
  }
};

 

3.2.4 监听事件、事件修饰符

监听事件

监听事件想到用 onChange, onClick等。

需要注意的是,传参数不能使用 onClick={this.handleClick(params)},这样子会每次 render的时候都会自动执行一次方法。

应该使用bind,或者箭头函数来传参。

组件示例代码:

export default {
  name: "HelloWorld",
  props: {
    msg: String
  },
  data() {
    return {};
  },
  methods: {
    handleClick(val) {
      alert(val);
    }
  },
  render() {
    return (
      <div>
        <button type="button" onClick={this.handleClick.bind(this, 11)}>
          方式一
        </button>
        <button type="button" onClick={() => this.handleClick(22)}>
          方式二
        </button>
      </div>
    );
  }
};

 用监听事件来实现v-model:

methods: {
    input(e) {
      this.value = e.target.value;
    }
  },
  render() {
    return (
      <div>
        <input type="text" value={this.value} onInput={this.input} />
      </div>
    );
  }

也可以调整为:

<input 
  type="text"
  value={this.value} 
  onInput={(e) => (this.vaue = e.target.value)} 
/>

还可以使用对象的方式去监听事件:解构事件

export default {
  name: "HelloWorld",
  props: {
    msg: String
  },
  data() {
    return {
      value: ""
    };
  },
  watch: {
    value(val) {
      console.log("this.model的内容:" + val);
    }
  },
  methods: {
    handleInput(e) {
      this.value = e.target.value;
    },
    handleFocus(e) {
      console.log(e.target);
    }
  },
  render() {
    return (
      <div>
        <input type="text" value={this.value} {...{ on: { input: this.handleInput, focus: this.handleFocus } }} />
      </div>
    );
  }
};

nativeOn仅对于组件,用于监听原生事件,也可以使用对象的方式去监听事件:

{...{nativeOn:{click: this.handleClick}}}

 

事件修饰符

和指令一样,除了个别的之外,大部分的事件修饰符都无法在JSX中使用。

  • .stop : 阻止事件冒泡,在JSX中使用event.stopPropagation()来代替
  • .prevent:阻止默认行为,在JSX中使用event.preventDefault() 来代替
  • .self:只当事件是从侦听器绑定的元素本身触发时才触发回调,使用下面的条件判断进行代替

 

if (event.target !== event.currentTarget){
  return
}

.enter与keyCode: 在特定键触发时才触发回调

if(event.keyCode === 13) {
  // 执行逻辑
}

除了上面这些修饰符之外,尤大大对于.once,.capture,.passive,.capture.once做了优化,简化代码:

export default {
  name: "HelloWorld",
  props: {
    msg: String
  },
  methods: {
    handleClick(e) {
      console.log("click事件:" + e.target);
    },
    handleInput(e) {
      console.log("input事件:" + e.target);
    },
    handleMouseDown(e) {
      console.log("mousedown事件:" + e.target);
    },
    handleMouseUp(e) {
      console.log("mouseup事件" + e.target);
    }
  },
  render() {
    return (
      <div
        {...{
          on: {
            // 相当于 :click.capture
            "!click": this.handleClick,
            // 相当于 :input.once
            "~input": this.handleInput,
            // 相当于 :mousedown.passive
            "&mousedown": this.handleMouseDown,
            // 相当于 :mouseup.capture.once
            "~!mouseup": this.handleMouseUp
          }
        }}
      >
        点击模块
      </div>
    );
  }
};

3.3 插槽

3.3.1 普通插槽与具名插槽

父传子。

示例:

<HelloWorld>
    <template slot="default">默认内容</template>
    <template slot="footer">
      <el-button type="primary">确定</el-button>
      <el-button>取消</el-button>
    </template>
</HelloWorld>

HelloWorld组件代码:this.$slots

export default {
  name: "HelloWorld",
  render() {
    return (
      <div>
        <div class="default">{this.$slots.default}</div>
        <div class="footer">{this.$slots.footer}</div>
      </div>
    );
  }
};

3.3.2 作用域插槽

子传父。

示例:

<HelloWorld>
    <template v-slot:content="{ name, age }">
      <div>姓名:{{ name }}</div>
      <div>年龄:{{ age }}</div>
    </template>
</HelloWorld>

HelloWorld组件代码:this.$scopedSlots

export default {
  name: "HelloWorld",
  render() {
    return (
      <div>
        <div class="content">{this.$scopedSlots.content({ name: "张三", age: 20 })}</div>
      </div>
    );
  }
};

子组件通过{this.$scopedSlots.content({ name: "张三", age: 20 })}指定插槽的名称为content,并将含有name,age属性的对象数据传递给父组件,父组件就可以在插槽内容中使用子组件传递来的数据。

看到v-html用innerHTML;v-for用map;.stop用event.stopPropagation()
你有什么感想?
这不就是我们JavaScript方法的操作吗。
所以JSX就是Javascript + XML。

 

后记

我以前一直觉得Vue中没必要用JSX吧,用模板Template足以了。

但经过这个需求,我想JSX在处理动态渲染组件还是蛮占有优势的?。

日后面试官问我JSX在Vue的有什么应用场景,我想我可以把这个需求说一说。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/68149.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

JavaScript期末大作业:基于HTML+CSS+JavaScript黑色的bootstrap响应式企业博客介绍模板

&#x1f389;精彩专栏推荐 &#x1f4ad;文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 &#x1f482; 作者主页: 【主页——&#x1f680;获取更多优质源码】 &#x1f393; web前端期末大作业&#xff1a; 【&#x1f4da;毕设项目精品实战案例 (10…

JTable详细介绍

目录 一、基本表格 二、修改列宽并显示列的名称 三、使用AbstractTableModel抽象类存储数据 一、基本表格 显示一个Table需要两组数据 1. 一维数组&#xff1a; String[]columnNames 表示表格的标题 2. 二维数组&#xff1a; String[][] heros 表格中的内容 默认情况下&…

使用openssl工具生成CSR文件

使用OpenSSL工具生成CSR文件 登录服务器。 安装OpenSSL工具。 执行以下命令&#xff0c;生成CSR文件。 openssl req -new -nodes -sha256 -newkey rsa:2048 -keyout [$Key_File] -out [$OpenSSL_CSR] 说明 -new&#xff1a;指定生成一个新的CSR文件。 -nodes&#xff1a;指定…

WindowsNT下的OpenGL

三、WindowsNT下的OpenGL 3.1、Windows NT下的OpenGL函数   如前面的章节所述&#xff0c;Windows NT下的OpenGL同样包含100多个库函数&#xff0c;这些函数都按一定的格式来命名&#xff0c;即每个函数都以gl开头。Windows NT下的OpenGL除了具有基本的OpenGL函数外&#xf…

威马汽车欲曲线上市:沈晖已提前持股并任职,销量垫底、员工降薪

12月5日&#xff0c;港交所上市公司Apollo出行&#xff08;HK:00860&#xff09;发布公告称&#xff0c;该公司拟收购一家从事智能电动车的公司&#xff0c;目标公司的业务涵盖一系列配备先进技术的智能电动车&#xff0c;目标客户为中国年轻且精通技术的用户&#xff08;特别是…

小迪-day14(注入类型之提交注入)

1、参数提交注入 1.1 明确参数类型 数字&#xff0c;字符&#xff0c;搜索&#xff0c;JSON等1.2 明确提交方式 GET, POST,COOKIE,REQUEST&#xff0c;HTTP头等可能有些网站是以Request的方式接受参数&#xff0c;所以GET和POST都行 注入的地方可能在User-Agent、cookie上&a…

辽宁熤星传媒文化:抖音原创特效怎么做?

现在很多小伙伴在家都基本上会去找一些副业来做&#xff0c;或者是一些赚钱的方法&#xff0c;要知道&#xff0c;抖音其实还是有很多赚钱的机遇在里面的&#xff0c;那么大家拍抖音都是需要去使用特效的&#xff0c;那么抖音特效应该怎么做呢&#xff1f;跟着辽宁熤星传媒小编…

探索可观测性:AIOps中的时序数据应用

01. 背景 随着科技的发展&#xff0c;时序数据在我们的认知中占据越来越多的位置&#xff0c;小到电子元件在每个时刻的状态&#xff0c;大到世界每天的新冠治愈人数&#xff0c;一切可观测&#xff0c;可度量&#xff0c;可统计的数据只要带上了时间这个重要的因素就会成为时…

Antlr4 快速入门 - 编写语法解析器

Antlr全称(ANother Tool for Language Recognition)&#xff0c;Antlr4是一款强大的语法分析器生成工具&#xff0c;推特&#xff0c;Haddop&#xff0c;Oracle等各大知名公司在用到了Antlr来构建自己的语言处理类项目。 一门语言的正式描述称为语法(grammar)&#xff0c;Antl…

计算机考研报名人数下降一半!211北京科技大学计算机报考人数公布!

北京科技大学是一所211大学&#xff0c;计算机学科评估B&#xff0c;计算机实力在211大学中还算不错。前段时间&#xff0c;北京科技大学公布了23考研的报考人数&#xff0c;而且详细到了各个专业的人数&#xff1a;北京科技大学2023年硕士研究生各招生专业准考人数统计表https…

PyQt5页面跳转问题及解决方式

问题1&#xff1a;如何实现页面间跳转 主要定义MainWindow类和Actions.py class MainWindow&#xff1a; Actions.py&#xff1a; 问题2&#xff1a;实现定义函数传参功能 大胆修改&#xff0c;将定义函数的参数值改为a&#xff1b;使用函数处将参数加上&#xff1a; 运行&…

腾讯云动态公网IP绑定域名实现内网服务器公网穿透

公众号推广: 目前CSDN进行VIP可见,文章可在微信公众号进行免费的阅读。 文章内容经过认证实践,比较的清晰易懂,适合初次接触的人员。 目录 公众号推广: 需求场景: 解决方案: 实现方案:

1.5.4 HDFS 客户端操作-hadoop-最全最完整的保姆级的java大数据学习资料

文章目录1.5.4 HDFS 客户端操作1.5.4.1 Shell 命令行操作HDFS1.5.4.2 JAVA客户端1.5.4.2.1 客户端环境准备1.5.4.2.2 HDFS的API操作1.5.4.2.2.1 上传文件1.5.4.2.2.2 下载文件1.5.4.2.2.3 删除文件/文件夹1.5.4.2.2.4 查看文件名称、权限、长度、块信息1.5.4.2.2.5 文件夹判断1…

Letbook Cookbook题单——数组2

Letbook Cookbook题单——数组2 39. 组合总和 难度中等 给你一个 无重复元素 的整数数组 candidates 和一个目标整数 target &#xff0c;找出 candidates 中可以使数字和为目标数 target 的 所有 不同组合 &#xff0c;并以列表形式返回。你可以按 任意顺序 返回这些组合。…

Qgis加载arcgis的gdb格式数据

方式1&#xff1a;文件浏览器打开可直接看到图层&#xff0c;拖到可视区域即可。 方式2&#xff1a;gdb文件夹拖到可视区域即可。 方式3&#xff1a;图层-矢量-目录 该gdb可能没有坐标信息&#xff0c;需要跟甲方询问或者自己尝试

安卓APP源码和设计报告——快递查询录入系统

《多媒体通信技术》 题 目&#xff1a;快递 完 成 日 期 2022年05月 目 录 1 绪论1 2 设计方案2 2.1 设计思路和方案2 2.2 功能要求2 2.3 设计的流程图2 3 设计过程3 3.1 界面布局3 3.2 功能实现3 4 运行结果与分析4 4.1 设计的使用步骤4 4.2 运行结果与分析4 5 …

【数据结构】—带头双向循环链表的实现(完美链表)

目录前言链表的实现新节点的创建链表初始化尾插与尾删头插与头删查找数据在任意位置的插入与删除链表的销毁总结前言 链表结构一共有八种形式&#xff0c;在前面的文章里已经讲完了不带头单向非循环链表的实现&#xff0c;但是我们发现该链表实现尾插与尾删时比较麻烦&#xff…

Java学习多态之向上转型

目录 一、向上转型的本质 举例说明 父类-Animal 子类-Cat类 测试-PolyDetail 语法 Object类 二、向上转型的特点 第一条 第二条 第三条 例子 Base类 TopBase类 测试类 第四条 运行结果 多态的前提&#xff1a;两个对象&#xff08;类&#xff09;存在继承关系 …

【软件测试】测试新人咋迅速成为bug小能手?刮目相看......

目录&#xff1a;导读前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09;前言 对于很多新入行测试…