| Vue怎么通过JSX动态渲染组件 | 您所在的位置：网站首页 › vue怎么遍历map › Vue怎么通过JSX动态渲染组件 |
Vue怎么通过JSX动态渲染组件
|
一、明确需求
有一组数组结构如下： 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去渲染出真正的组件。 有请今天的主角JSX上场。
2.3 JSX动态渲染组件 父组件 const arr = [ { tag: 'van-field' }, // 输入框 { tag: 'van-cell' }, // 弹出层 { tag: 'van-stepper' } // 步进器 ]子组件RendTag.vue 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 ( ); }, }; 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 ( ); }, };我们利用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 数量：{this.count}; } }; export default { name: "HelloWorld", props: { msg: String }, data() { return { count: 0 }; }, methods: { // 改变button按钮数量 changeNum(val) { this.count = val; } }, render() { const { count } = this; // 解构 return ( { name }} 年龄：{{ age }}HelloWorld组件代码：this.$scopedSlots export default { name: "HelloWorld", render() { return ( {this.$scopedSlots.content({ name: "张三", age: 20 })} ); } };子组件通过{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的有什么应用场景，我想我可以把这个需求说一说。 |
【本文地址】