快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线：028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后，网站问题一站解决

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

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

坚守“ 做人真诚 · 做事靠谱 · 口碑至上 · 高效敬业 ”的价值观，专业网站建设服务10余年为成都地磅秤小微创业公司专业提供企业网站制作营销网站建设商城网站建设手机网站建设小程序网站建设网站改版，从内容策划、视觉设计、底层架构、网页布局、功能开发迭代于一体的高端网站建设服务。

一、明确需求

有一组数组结构如下：

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去渲染出真正的组件。


      

2.3 JSX动态渲染组件

父组件


  
  


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

子组件RendTag.vue

我们利用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 数量：{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 (
      
        
      
    );   } };

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 (
      
        动态绑定class

        动态绑定style

      
    );   } };

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

3.2.3 常用指令

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

v-html

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

组件使用：

 

组件代码：

export default {
  name: "HelloWorld",
  props: {
    msg: String
  },
  data() {
    return {};
  },
  methods: {},
  render() {
    return 
;   } };

渲染DOM结果：

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

v-for

使用map来实现：

render() {
  const list = [1,2,3]
  return( 
    

      { list.map(item => ) }
    

  )
}

v-if

简单示例：用三元

render() {
    const bool = false;
    return 
{bool ?  : }
;
}

复杂示例：直接用JS

render() {
  let num = 3
  if(num === 1){ return(  ) }
  if(num === 2){ return(  ) }
  if(num === 3){ return(  ) }
}

v-model

直接使用：

export default {
  name: "HelloWorld",
  props: {
    msg: String
  },
  data() {
    return {
      value: "abc"
    };
  },
  watch: {
    value(val) {
      console.log("this.model内容：" + val);
    }
  },
  methods: {},
  render() {
    return (
      

        
      

    );
  }
};

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 (
      

        
          方式一
        
         this.handleClick(22)}>
          方式二
        
      

    );
  }
};

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

methods: {
    input(e) {
      this.value = e.target.value;
    }
  },
  render() {
    return (
      

        
      

    );
  }

也可以调整为：

 (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 (
      

        
      

    );
  }
};

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

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

事件修饰符

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

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 (
      

        点击模块
      

    );
  }
};

3.3 插槽

3.3.1 普通插槽与具名插槽

父传子。

示例：


    默认内容
    
      确定
      取消
    

HelloWorld组件代码：this.$slots

export default {
  name: "HelloWorld",
  render() {
    return (
      

        {this.$slots.default}

        {this.$slots.footer}
      
    );
  }
};

3.3.2 作用域插槽

子传父。

示例：


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


网页标题：Vue如何通过JSX动态渲染组件
文章分享：http://6mz.cn/article/jghide.html

其他资讯