Vue父传子,在methods中获取props内的值
父传子父组件<!-- 三级连选器组件 -->//绑定组件所需要传的值<CascadingSelector ref="child" @sonSend="fatherJoin" :nums='num'/>//这是所需要传的值num: {province: '',city:'',area:'',},子组件props:{nums:{type:Object //设置数据类型
·
记录今日问题
父传子
父组件
<!-- 三级连选器组件 -->
//绑定组件 所需要传的值
<CascadingSelector ref="child" @sonSend="fatherJoin" :nums='num'/>
//这是所需要传的值
num: {
province: '',
city:'',
area:'',
},
子组件
props:{
nums:{
type:Object //设置数据类型
}
}
点击父组件调用子组件事件
在父组件点击事件中
// 调用子组件事件
setTimeout(() => {
let child = this.$refs.child
//调用子组件事件
child.show()
}, 10);
子组件事件
show() {
console.log('我是父组件点击触发的子组件事件')
},
Vue父传子,在methods中获取props内的值
//子组件中,定义传入的变量的类型等
props:{
nums:{
type:Object,
}
}
可以再生命周期函数中直接打印props
mounted(){
let _this=this;
console.log(_this._props);
}
方法一:
直接获取
mounted() {
let _this=this;
let {nums}=_this._props;
console.log(nums);
},
方法二:
当获取不到的时候,使用定时器获取
mounted() {
let _this=this;
let {nums}=_this._props;
setTimeout(()=>{
console.log(this._props)
console.log(nums,111111)
},30)
}
方法三:
利用watch监听
//直接监听nums,因为这里的props的变量名为nums
watch:{
nums(newData,prevData){
console.log(newData)
this.xxx = newData //可以再这里赋值,这样在事件中就可以获取数据
}
}
才疏学浅,如有不足,欢迎指出 ,不胜感激 ٩(๑❛ᴗ❛๑)۶
更多推荐
已为社区贡献2条内容
所有评论(0)