vue3踩坑

序

使用jsx语法

setup和render

1. render的渲染写法；
2. setup直接return的渲染写法；

jsCopy
import childProps from './ChildProps';
export default defineComponent({
    name: 'parent',
    components: { childProps },
    setup() {
        return () => (
          <child-props
            num={5}
            msg={'这里是msg'}
            isIfBool={true}
            isShowBool={true}
            // list={['one', 'two', 'three']}
            list={[{ name: 'one' }, { name: 'two' }, { name: 'three' }]}
            obj={{ name: '张三', age: 16, gender: '男生' }}
          />
        )
    }
}); 

jsCopy
import { defineComponent, reactive } from 'vue';

export default defineComponent({
  name: 'ChildProps',
  props: {
    // 接收 数值
    num: {
      type: Number,
      default: 0,
    },
    // 接收 字符串
    msg: {
      type: String,
      default: '',
    },
    // 接收v-if的判断
    isIfBool: {
      type: Boolean,
      default: false,
    },
    // 接收v-show的判断
    isShowBool: {
      type: Boolean,
      default: false,
    },
    // 接收数组
    list: {
      type: Array,
      default: () => [],
    },
    // 接收对象
    obj: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  setup(props) {
    interface Obj {
      name?: string;
      age?: number;
      gender?: string;
    }
    const obj = reactive({ ...props });
    console.log(obj);
    // { name: '张三', age: 16, gender: '男生' }
    const newObj: Obj = obj.obj;

    // 将对象转换成数组
    const arr: Array<any> = reactive([]);
    // for (const i in newObj) {
    //   arr.push({ [i]: newObj[i] });
    // }
    // console.log(arr);
    /**
     * [
     *  {name: '张三'},
     *  {age: 16},
     *  {gender: '男生'},
     * ]
     */
    for (const key in newObj) {
      const o = {};
      o['name'] = key;
      o['value'] = newObj[key];
      arr.push(o);
    }
    // console.log(arr);
    /**
     * [
     *   {name: 'name', value: '张三'},
     *   {name: 'age', value: 16},
     *   {name: 'gender', value: '男生'},
     * ]
     */

    return () => (
      <>
        <div>-----------ChildProps 组件---------</div>
        {/* Number 的写法 */}
        <div>{obj.num}</div>
        {/* String 的写法 */}
        <div>{obj.msg}</div>
        {/* v-if 的判断的写法 */}
        {props.isIfBool ? <div>这里是v-if的成功判断</div> : null}
        {/* v-show的判断写法 */}
        <div v-show={props.isShowBool}>这里是v-show的成功判断</div>
        {/* list 一维数组列表写法 */}
        {/* {this.list.map((item, index) => {
          return <div key={index}>{item}</div>;
        })} */}
        {props.list.map((item: any, index: number) => {
          return <div key={index}>{item.name}</div>;
        })}
        {/* 对象转换成数组 对象数组列表写法 */}
        {arr.map((item: any, index: number) => {
          return (
            <div key={index}>
              {item.name}:{item.value}
            </div>
          );
        })}
        <div>-----------ChildProps 组件---------</div>
      </>
    );
  },
});

jsCopy
import { defineComponent, reactive } from 'vue';

export default defineComponent({
  name: 'ChildProps',
  props: {
    // 接收 数值
    num: {
      type: Number,
      default: 0,
    },
    // 接收 字符串
    msg: {
      type: String,
      default: '',
    },
    // 接收v-if的判断
    isIfBool: {
      type: Boolean,
      default: false,
    },
    // 接收v-show的判断
    isShowBool: {
      type: Boolean,
      default: false,
    },
    // 接收数组
    list: {
      type: Array,
      default: () => [],
    },
    // 接收对象
    obj: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  setup(props) {
    interface Obj {
      name?: string;
      age?: number;
      gender?: string;
    }
    const obj = reactive({ ...props });
    console.log(obj);
    // { name: '张三', age: 16, gender: '男生' }
    const newObj: Obj = obj.obj;

    // 将对象转换成数组
    const arr: Array<any> = reactive([]);
    // for (const i in newObj) {
    //   arr.push({ [i]: newObj[i] });
    // }
    // console.log(arr);
    /**
     * [
     *  {name: '张三'},
     *  {age: 16},
     *  {gender: '男生'},
     * ]
     */
    for (const key in newObj) {
      const o = {};
      o['name'] = key;
      o['value'] = newObj[key];
      arr.push(o);
    }
    // console.log(arr);
    /**
     * [
     *   {name: 'name', value: '张三'},
     *   {name: 'age', value: 16},
     *   {name: 'gender', value: '男生'},
     * ]
     */

    return {
      arr,
    };
  },
  render() {
    return (
      <>
        <div>-----------ChildProps 组件---------</div>
        {/* Number 的写法 */}
        <div>{this.num}</div>
        {/* string 的写法 */}
        <div>{this.msg}</div>
        {/* v-if 的判断的写法 */}
        {this.isIfBool ? <div>这里是v-if的成功判断</div> : null}
        {/* v-show的判断写法 */}
        <div v-show={this.isShowBool}>这里是v-show的成功判断</div>
        {/* list 一维数组列表写法 */}
        {/* {this.list.map((item, index) => {
          return <div key={index}>{item}</div>;
        })} */}
        {this.list.map((item: any, index: number) => {
          return <div key={index}>{item.name}</div>;
        })}
        {/* 对象转换成数组 对象数组列表写法 */}
        {this.arr.map((item: any, index: number) => {
          return (
            <div key={index}>
              {item.name}:{item.value}
            </div>
          );
        })}
        <div>-----------ChildProps 组件---------</div>
      </>
    );
  },
});