组件间传值
步骤一:创建组件与子组件
<script>
const app= Vue.createApp({
data(){
},
template:`
<div><test/></div>
`
});
app.component("test",{
template:`<div>子组件内容</div>`
})
const vm = app.mount('#root');
</script>
运行结果:
子组件内容
步骤二:父子组件传递参数(静态传参)
①父组件调用子组件的标签,通过标签上的属性向子组件传递值
②子组件通过props接收属性值之后,可以在模板中直接使用从父组件中接收过来的数据了
<script>
const app= Vue.createApp({
template:`
<div><test content="父组件:通过content属性将数据传递给了test子组件" /></div>
`
});
app.component("test",{
props:['content'],
template:`<div>{{content}}</div>`
})
const vm = app.mount('#root');
</script>
运行结果:
父组件:通过content属性将数据传递给了test子组件
步骤三:父子组件传递参数(动态传参)
父组件调用子组件的标签,通过标签上的属性向子组件传递值(其中:将属性内容定义在data数据项中,通过v-bind指令传递)
<body>
<div id="root"></div>
</body>
<script>
const app= Vue.createApp({
data() {
return {
num:123
}
},
template:`
<div><test :content="num" /></div>
`
});
app.component("test",{
props:['content'],
template:`<div>{{content}}</div>`
})
const vm = app.mount('#root');
</script>
运行结果:
123
步骤四:子组件接收值校验
类型校验
type:String,Boolean,Array,Object,Function,Symbol
- String类型校验
<script>
const app= Vue.createApp({
data() {
return {
num:123
}
},
template:`
<div><test :content="num" /></div>
`
});
app.component("test",{
props:{
content:String,
},
template:`<div>{{content}}</div>`
})
const vm = app.mount('#root');
</script>
运行结果:
2. Function类型校验
<script>
const app= Vue.createApp({
data() {
return {num: ()=> {alert(123)}}
},
template:`
<div><test :content="num" /></div>
`
});
app.component("test",{
props:{
content:Function,
},
methods: {
handleclick(){
alert(456);
this.content();
}
},
template:`<div @click="this.handleclick">{{content}}</div>`
})
const vm = app.mount('#root');
</script>
必填校验
required 必填
<script>
const app= Vue.createApp({
data() {
return {num: 123}
},
template:`
<div><test /></div>
`
});
app.component("test",{
props:{
content:{
type:Number,
required:true
},
},
template:`<div>{{content}}</div>`
})
const vm = app.mount('#root');
</script>
若父组件未向子组件传递content属性,警告为
默认值设置
default 默认值
<script>
const app= Vue.createApp({
data() {
return {num: 123}
},
template:`
<div><test /></div>
`
});
app.component("test",{
props:{
content:{
type:Number,
default:789
},
},
template:`<div>{{content}}</div>`
})
const vm = app.mount('#root');
</script>
运行结果:
789
default不一定是数字,也可以是函数
<script>
const app= Vue.createApp({
data() {
return {num: 123}
},
template:`
<div><test /></div>
`
});
app.component("test",{
props:{
content:{
type:Number,
default:()=>{
return 456;
}
},
},
template:`<div>{{content}}</div>`
})
const vm = app.mount('#root');
</script>
运行结果同上
深度校验
<script>
const app= Vue.createApp({
data() {
return {num: 1234}
},
template:`
<div><test :content="num"/></div>
`
});
app.component("test",{
props:{
content:{
type:Number,
validator:function(value){
return value <1000;
},
default:function(){
return 456;
}
},
},
template:`<div>{{content}}</div>`
})
const vm = app.mount('#root');
</script>
运行结果