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

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

  
  


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

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 (
      
        
      

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

      

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

渲染DOM结果：

v-for

使用map来实现：

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

      { list.map(item => 按钮{item}) }
    
  )
}

v-if

简单示例：用三元

render() {
    const bool = false;
    return 
{bool ? 按钮1 : 按钮2}
;
}

复杂示例：直接用JS

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

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中使用。

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

        点击模块
      
    );
  }
};

3.3 插槽

3.3.1 普通插槽与具名插槽

父传子。

示例：

    默认内容
    
      确定
      取消
    

HelloWorld组件代码：this.$slots

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

        {this.$slots.default}
        {this.$slots.footer}