Vue子组件获取值
文章描述：
Vue子组件获取父组件传过来的值
Vue
等号前面的是子组件接收的值，等号后面的是父组件的值
<template>
<div>
<Pup :query="query" :items="list" :isShow="isShow" :msg="msg" @login="sonLogin"></Pup>
</div>
</template>import Pup from '../components/common/Pup.vue';
export default{
components:{
Pup,
},
data(){
return{
query:{
startDate:'2022-12-01',
endDate:'2022-12-31',
},
list:[1,2,3,4],
isShow:true,
msg:'你好!'
}
},
methods:{
sonLogin(val){
console.log('父组件login')
console.log(val)
},
}
}子组件
子组件可以用this.变量直接显示父组件传过来的值
<template>
<div>
<div>
父组件：{{query.startDate}}
</div>
<div>
组件：{{startDate}}
</div>
<div>{{this.items}}</div>
<div>{{this.isShow}}</div>
<div>{{this.msg}}</div>
<div @click="sonClick">子组件点击</div>
</div>
</template>
数据类型有String、Array、String、Number、Boolean
this.$emit()子组件向父组件传值
export default{
// name:'',
props:{
query:{
type:Object,
default:{}
},
items:{
type:Array,
default:[]
},
isShow:{
type:Boolean,
default:false
},
msg:{
type:[String,Number],
default:''
}
},
data(){
return{
startDate:this.query.startDate
}
},
methods:{
sonClick(){
console.log('点击了子组件')
var str = '123456';
this.$emit('login',str)
}
}
}
发布时间：2022/12/12
发表评论