Vue怎么通过JSX动态渲染组件 | 您所在的位置:网站首页 › vue怎么遍历map › 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的有什么应用场景,我想我可以把这个需求说一说。 |
CopyRight 2018-2019 实验室设备网 版权所有 |