扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 精选 >Vue如何通过JSX动态渲染组件
  • 261

0
分享到

Vue如何通过JSX动态渲染组件

2023-07-04 18:07:32 261人浏览 八月长安
摘要

这篇文章主要介绍“Vue如何通过jsX动态渲染组件”，在日常操作中，相信很多人在Vue如何通过JSX动态渲染组件问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Vue如何通过JSX动态渲染组件”的疑惑有所帮助！

这篇文章主要介绍“Vue如何通过jsX动态渲染组件”，在日常操作中，相信很多人在Vue如何通过JSX动态渲染组件问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Vue如何通过JSX动态渲染组件”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

一、明确需求

有一组数组结构如下：

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

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

Vue如何通过JSX动态渲染组件

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

二、进行分析

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>

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渲染成真正的组件

Vue如何通过JSX动态渲染组件

我们用普通的组件，无法像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>    );  }};

Vue如何通过JSX动态渲染组件

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结果：

Vue如何通过JSX动态渲染组件

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动态渲染组件”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！

--结束END--

本文标题: Vue如何通过JSX动态渲染组件

本文链接: https://lsjlt.com/news/346676.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • Vue如何通过JSX动态渲染组件
    这篇文章主要介绍“Vue如何通过JSX动态渲染组件”，在日常操作中，相信很多人在Vue如何通过JSX动态渲染组件问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Vue如何通过JSX动态渲染组件”的疑惑有所帮助！...
    99+
    2023-07-04
  • 聊聊Vue怎么通过JSX动态渲染组件
    3.2 基本用法3.2.1 函数式组件我们在组件中，也可以嵌入ButtonCounter组件。const ButtonCounter = { name: "button-counter", props: [&qu...
    99+
    2023-05-14
    组件 JSX Vue vue3
  • Vue中的动态组件怎么实现渲染
    本篇内容介绍了“Vue中的动态组件怎么实现渲染”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！1、什么是动态组件动态组件指的是动态切换组件的显...
    99+
    2023-06-30
  • 如何阻止vue组件渲染
    这篇文章主要介绍“如何阻止vue组件渲染”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“如何阻止vue组件渲染”文章能帮助大家解决问题。一、为什么要阻止Vue组件的渲染在某些情况下，我们可能需要阻止V...
    99+
    2023-07-05
  • vue实现动态表单动态渲染组件的方式(1)
    vue 实现动态表单/动态渲染组件的方式（一），供大家参考，具体内容如下 思路 先写好各个可能会出现的表单或者自定义的组件，引入。此时后端可能会给到一个对象型数组，每个对象有要渲染组...
    99+
    2024-04-02
  • vue实现动态表单动态渲染组件的方式(2)
    本文实例为大家分享了vue实现动态表单动态渲染组件的方式，供大家参考，具体内容如下 思路 先把所有可能出现的表单/组件写在主页面每个表单/组件的slot 属性值要与后端返回的表单/组...
    99+
    2024-04-02
  • vue封装echarts组件,数据动态渲染方式
    目录vue封装echarts组件,数据动态渲染vue动态渲染echarts图表第一步，选择标签第二步 处理服务端返回的数据第三步 创建图表数据vue封装echarts组件,数据动态渲...
    99+
    2022-12-08
    vue封装echarts组件 数据动态渲染 vue封装echarts vue渲染
  • vue组件中如何重新渲染
    这篇文章主要讲解了“vue组件中如何重新渲染”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“vue组件中如何重新渲染”吧！改变key这个是最推荐的。因为vue是通过虚拟Dom算法来判断元素的变...
    99+
    2023-06-25
  • Vue如何实现动态渲染input输入框
    本文小编为大家详细介绍“Vue如何实现动态渲染input输入框”，内容详细，步骤清晰，细节处理妥当，希望这篇“Vue如何实现动态渲染input输入框”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。问题描述就比如现在...
    99+
    2023-07-04
  • vue单一组件下如何动态修改数据时的全部重渲染
    这篇文章主要为大家展示了“vue单一组件下如何动态修改数据时的全部重渲染”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“vue单一组件下如何动态修改数据时的全部重...
    99+
    2024-04-02
  • Vue通过字符串关键字符实现动态渲染input输入框
    目录问题描述{ xxx } 标识字符渲染Dom组件设计组件开发重点输入完成事件动态编辑文本今天做一个简单的demo，就是有一个字符串，字符串里面有标识符，前端检测到标识符之后，需要将...
    99+
    2022-12-08
    Vue动态渲染input输入框 Vue 渲染input输入框 Vue input输入框
  • Vue组件渲染与更新实现过程浅析
    目录1. 模板编译2. 组件渲染和更新1. 模板编译 Vue的模板编译就是将模板字符串转换为渲染函数的过程。具体来说，当组件的生命周期执行到created和beforeMounted...
    99+
    2023-03-03
    Vue组件渲染 Vue组件更新
  • vue3如何使用defineAsyncComponent与component标签实现动态渲染组件
    本篇内容介绍了“vue3如何使用defineAsyncComponent与component标签实现动态渲染组件”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅...
    99+
    2023-07-06
  • vue如何有条件地渲染slot
    这篇文章主要为大家展示了“vue如何有条件地渲染slot”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“vue如何有条件地渲染slot”这篇文章吧。有条件地渲染slot每个 Vue&nb...
    99+
    2023-06-27
  • C#中wpf如何通过HwndHost渲染视频
    这篇文章主要为大家展示了“C#中wpf如何通过HwndHost渲染视频”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“C#中wpf如何通过HwndHost渲染视频”这篇文章吧。一、如何实现通过继承...
    99+
    2023-06-25
  • react如何让子组件不渲染
    本篇内容主要讲解“react如何让子组件不渲染”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“react如何让子组件不渲染”吧!react让子组件不渲染的方法：1、通过“shouldCompone...
    99+
    2023-07-04
  • Vue中如何实现img的src是动态渲染时不显示
    这篇文章主要介绍了Vue中如何实现img的src是动态渲染时不显示，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。今天在项目中遇到一个需求，设...
    99+
    2024-04-02
  • vue+elementUI组件递归实现可折叠动态渲染多级侧边栏导航
    早就实现了功能，但是发现点击的时候，选中的菜单项背景色会变白，周五时候仔细观察了一下，发现并不是调整样式的问题，而是选项没有被选中，于是好好研究了一下组件递归这块，总结记录一下心路历...
    99+
    2024-04-02
  • 如何通过npm或yarn自动生成vue组件
    这篇文章主要为大家展示了“如何通过npm或yarn自动生成vue组件”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“如何通过npm或yarn自动生成vue组件”这...
    99+
    2024-04-02
  • vue动态组件如何使用
    这篇文章主要介绍“vue动态组件如何使用”，在日常操作中，相信很多人在vue动态组件如何使用问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue动态组件如何使用”的疑惑有所帮助！接下来，请跟着小编一起来学习吧...
    99+
    2023-06-29
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作