组件间传值
父子组件间传值,子组件通过props这个属性接受父组件传递过来的值。
props可以是数组也可以是对象。
静态传值
代码演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue组件间传值及传值校验</title>
<!-- 使用CDN引入Vue -->
<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>
页面效果:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210708101752526.png)
动态传值
代码演示:
const app = Vue.createApp({
data(){
return {
content: "动态传值"
}
},
template:`
<div>
<demo :title='content'/>
</div>
`
})
app.component('demo', {
props:['title'],
template:`<div >{{title}}</div>`
})
页面效果:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210708101923662.png)
params传值
代码演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>
页面效果:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210708150332161.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3OTAxMDA3,size_16,color_FFFFFF,t_70)
传值校验
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校验不通过,控制台给出警告。
页面效果:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210708103612394.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3OTAxMDA3,size_16,color_FFFFFF,t_70)
required校验
代码演示:
const app = Vue.createApp({
template:`
<div>
<demo />
</div>
`
})
app.component('demo', {
props:{title: {
type: Number,
required: true //必填
}},
template:`<div >{{title}}</div>`
})
required校验不通过,控制台给出警告。
页面效果:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210708105221971.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3OTAxMDA3,size_16,color_FFFFFF,t_70)
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>`
})
页面效果:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210708104208995.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3OTAxMDA3,size_16,color_FFFFFF,t_70)
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校验不通过,控制台给出警告。
页面效果:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210708110440558.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3OTAxMDA3,size_16,color_FFFFFF,t_70)
单项数据流
单项数据流:子组件可以使用父组件传递的数据,但绝对不可以修改父组件传递的数据
代码演示:
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');
触发点击事件尝试修改父组件传递的数据失败
页面效果:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210708151850653.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3OTAxMDA3,size_16,color_FFFFFF,t_70)
通过子组件创建父组件传递数据的副本,修改渲染子组件副本完成功能。
代码演示:
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');
页面效果:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210708153201396.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ3OTAxMDA3,size_16,color_FFFFFF,t_70)
总结
组件间传值
父子组件间传值,子组件通过props这个属性接受父组件传递过来的值。
props可以是数组也可以是对象。
传值校验
type校验:type可以校验Number,String, Boolean, Array, Object, Function等类型。
required校验:必填项校验。
default校验:默认值校验。
validator校验:验证校验。
单项数据流:
子组件可以使用父组件传递的数据,但绝对不可以修改父组件传递的数据。
但子组件可以创建父组件数据副本,修改渲染子组件副本完成功能。
(完)