vue 中的 prop
prop的作用是父组件向子组件单向传递数据,这个过程是单向的。传递的属性可以是静态的,可以是动态的,可以是数字,可以是字符串,可以是数组,还可以是对象,甚至可以在传递数据的时候写一个校验函数进行校验。1、传静态属性子组件:<template><div><h1>{{ msg }}</h1></div></template><
·
prop的作用是父组件向子组件单向传递数据,这个过程是单向的。传递的属性可以是静态的,可以是动态的,可以是数字,可以是字符串,可以是数组,还可以是对象,甚至可以在传递数据的时候写一个校验函数进行校验。
1、传静态属性
子组件:
<template>
<div>
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
props: ['msg']
}
</script>
父组件:
<template>
<div id="app">
<TenantSet msg="hello" />
</div>
</template>
<script>
import TenantSet from './TenantSet.vue';
export default {
components: {
TenantSet
},
data() {
return {}
}
};
</script>
2、传动态字符串
子组件:
<template>
<div>
<h3>{{ msg }}</h3>
</div>
</template>
<script>
export default {
props: ['msg']
}
</script>
父组件:
<template>
<div id="app">
<TenantSet :msg="hello" />
</div>
</template>
<script>
import TenantSet from './TenantSet.vue';
export default {
components: {
TenantSet
},
data() {
return {
hello: 'hello world'
}
}
};
</script>
父组件做了一些修改,动态绑定msg,data里面定义msg的值
3、传动态数组
子组件:
<template>
<div>
<ul>
<li v-for="item in msg" :key="item">
{{ item }}
</li>
</ul>
</div>
</template>
<script>
export default {
props: ['msg']
}
</script>
父组件:
<template>
<div id="app">
<TenantSet :msg="hello" />
</div>
</template>
<script>
import TenantSet from './TenantSet.vue';
export default {
components: {
TenantSet
},
data() {
return {
hello: ['aa', 'bb', 'cc']
}
}
};
</script>
4、传动态对象
子组件:
<template>
<div>
<h3>{{ msg.id }}</h3>
<h4>{{ msg.name }}</h4>
</div>
</template>
<script>
export default {
props: ['msg']
}
</script>
父组件:
<template>
<div id="app">
<TenantSet :msg="hello" />
</div>
</template>
<script>
import TenantSet from './TenantSet.vue';
export default {
components: {
TenantSet
},
data() {
return {
hello: {
id: 1,
name: 'hello dj'
}
}
}
};
</script>
5、对prop的状态进行验证
- String
- Number
- Boolean
- Array
- Object
- Date
- Function
- Symbol
子组件:
<template>
<div>
<h4>{{ num }}</h4>
<h4>{{ msg }}</h4>
<h4>{{ obj.id }}</h4>
<h4>{{ obj.name }}</h4>
<ul>
<li v-for="item in arrs" :key="item">
{{ item }}
</li>
</ul>
</div>
</template>
<script>
export default {
props: {
num: {
type: Number
},
msg: {
type: String
},
arrs: {
type: Array
},
obj: {
type: Object
}
}
}
</script>
父组件:
<template>
<div id="app">
<TenantSet :num="num" :msg="hello" :arrs="arr" :obj="post" />
</div>
</template>
<script>
import TenantSet from './TenantSet.vue';
export default {
components: {
TenantSet
},
data() {
return {
num: 10,
hello: 'hello world',
arr: ['aa', 'bb', 'cc'],
post: {
id: 1,
name: 'hello dj'
}
}
}
};
</script>
6、自定义校验函数
props: {
status: {
validator: function (value) {
// 这个值必须匹配下列字符串中的一个
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
7、默认值
props: {
num: {
type: Number,
default: 100
},
}
更多推荐
已为社区贡献5条内容
所有评论(0)