Vue父传子，在methods中获取props内的值

记录今日问题

父传子

父组件

<!-- 三级连选器组件 -->
									//绑定组件                          所需要传的值
<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 //可以再这里赋值，这样在事件中就可以获取数据
 }
}

才疏学浅，如有不足，欢迎指出 ，不胜感激 ٩(๑❛ᴗ❛๑)۶