感谢阅读本文 · 欢迎在下方留言交流你的想法
探索更多文章 →共 0 条
使用jsx语法
jsimport 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
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>
</>
);
},
});
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>
</>
);
},
});