开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第 5 天，点击查看活动详情
组件间传值
父子组件间传值,子组件通过props这个属性接受父组件传递过来的值。 props可以是数组也可以是对象。
静态传值
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<title>vue组件间传值及传值校验</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
template:`
<div>
<demo title='静态传值'/>
</div>
`
})
app.component('demo', {
props:['title'],
template:`<div >{{title}}</div>`
})
const vm = app.mount('#root');
</script>
</body>
</html>
页面效果：
动态传值
代码演示：
const app = Vue.createApp({
data(){
return {
content: "动态传值"
}
},
template:`
<div>
<demo :title='content'/>
</div>
`
})
app.component('demo', {
props:['title'],
template:`<div >{{title}}</div>`
})
页面效果：
params传值
代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<title>单项数据流</title>
<!-- 使用CDN引入Vue -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data(){
return {
params:{
a:8888,
b:9999,
c:6666
}
}
},
template:`
<div>
<demo v-bind="params"/>
<demo :a="params.a" :b="params.b" :c="params.c"/>
</div>
`
})
app.component('demo', {
props:['a','b','c'],
template:`<div>{{a}}-{{b}}-{{c}}</div>`
})
const vm = app.mount('#root');
</script>
</body>
</html>
页面效果：
传值校验
type校验
type可以校验Number,String, Boolean, Array, Object, Function等类型。
代码演示：
const app = Vue.createApp({
data(){
return {
content: "字符串"
}
},
template:`
<div>
<demo :title='content'/>
</div>
`
})
app.component('demo', {
// 两种写法效果相同 Number类型校验
props:{title: Number},
// props:{title: {
// type: Number,
// }},
template:`<div >{{title}}</div>`
})
type校验不通过，控制台给出警告。
页面效果：
required校验
代码演示：
const app = Vue.createApp({
template:`
<div>
<demo />
</div>
`
})
app.component('demo', {
props:{title: {
type: Number,
required: true //必填
}},
template:`<div >{{title}}</div>`
})
required校验不通过，控制台给出警告。
页面效果：
default校验
代码演示：
const app = Vue.createApp({
template:`
<div>
<demo />
</div>
`
})
app.component('demo', {
props:{title: {
type: Number,
// 两种写法效果相同 默认值：666
default: 666
// default: () => {
// return 666
// }
}},
template:`<div >{{title}}</div>`
})
页面效果：
validator校验
代码演示：
const app = Vue.createApp({
data(){
return {
content: 6666
}
},
template:`
<div>
<demo :title="content"/>
</div>
`
})
app.component('demo', {
props:{title: {
type: Number,
validator: function(value){
return value < 1000
}
}},
template:`<div >{{title}}</div>`
})
6666大于1000，validator校验不通过，控制台给出警告。
页面效果：
单项数据流
单项数据流：子组件可以使用父组件传递的数据，但绝对不可以修改父组件传递的数据
代码演示：
const app = Vue.createApp({
data(){
return {
num: 1
}
},
template:`
<div>
<demo :count="num"/>
</div>
`
})
app.component('demo', {
props:['count'],
template:`<div @click="count++">{{count}}</div>`
})
const vm = app.mount('#root');
触发点击事件尝试修改父组件传递的数据失败
页面效果：
通过子组件创建父组件传递数据的副本，修改渲染子组件副本完成功能。
代码演示：
const app = Vue.createApp({
data(){
return {
num: 1
}
},
template:`
<div>
<demo :count="num"/>
</div>
`
})
app.component('demo', {
props:['count'],
data(){
return {
myCount: this.count
}
},
template:`<div @click="myCount++">{{myCount}}</div>`
})
const vm = app.mount('#root');
页面效果：
总结
组件间传值
父子组件间传值,子组件通过props这个属性接受父组件传递过来的值。
props可以是数组也可以是对象。
传值校验
type校验：type可以校验Number,String, Boolean, Array, Object, Function等类型。
required校验：必填项校验。
default校验：默认值校验。
validator校验：验证校验。
单项数据流：
子组件可以使用父组件传递的数据，但绝对不可以修改父组件传递的数据。
但子组件可以创建父组件数据副本，修改渲染子组件副本完成功能。
结语
本文到此结束，谢谢大家的观看！
如有问题，欢迎各位指正！
