vue3踩坑

    0

使用jsx语法

setup和render

  1. render的渲染写法;
  2. setup直接return的渲染写法;
js
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: '男生' }} /> ) } });
js
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> </> ); }, });
js
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> </> ); }, });
评论区
共有评论 0
暂无评论