vue中组件动态传值,实现数据实时更新

文章介绍了在Vue.js项目中,如何从父组件向子组件动态传递数据。方法一是通过watch监听props的变化,当父组件的数据更新时,子组件相应地更新内部状态。方法二是使用ref属性,直接调用子组件的方法来传递数据。
摘要由CSDN通过智能技术生成
  1. 在一些项目需求中需要父组件向子组件动态传值,比如父组件动态通过axios获取数据,然后传给子组件,子组件根据拿到的数据进行展示。
  2. props传值的时候,只会首次传递绑定的值,不会变化

方式1

  • 利用watch监听props变化
// 子组件
props: {
	params: {
		type: String,
		default: '',
		required: true
	}:
	xxx: {
	   type: Array,  // 当props为数组或者对象的时候,要通过工厂函数的形式来设置默认值
	   default() {
	   	  return []
	   }  
	 }
},
data() {
   return {
		  xxx :  '' // 可以再computed中对相关数据进行处理
	}
}watch:{  // 监听
     params(curVal,oldVal){
      if(curVal){
       this.xxx=curVal;
       }
     },
}

方式2

  • 利用ref获取子组件,调用子组件的方法将值传递过去
// 父组件,调用子组件方法
<Child ref="mychild" :src-list="xxx"/>
mounted(){
// 通过axios获取数据,假设为rr
 this.$refs.mychild.getParentData(rr)
}

// 子组件,定义方法
getParentData(val) {
	this.xxx = val; // 将父组件的数据放到自己的data中
}
Vueprops传值默认是单向的,即父组件向子组件传递的值只会在初始化时传递一次,不会实时更新。但是我们可以通过使用watch或者ref来实现props传值实时更新。 方式1:利用watch监听props变化。在子组件使用watch来监听props的变化,当props的值发生变化时,可以在watch的回调函数更新组件的相关数据。例如: ```javascript props: { params: { type: String, default: '', required: true } }, data() { return { xxx: '' } }, watch: { params(curVal, oldVal) { if (curVal) { this.xxx = curVal; } } } ``` 方式2:利用ref获取子组件,调用子组件的方法将值传递过去。在父组件,可以通过ref获取子组件的实例,然后调用子组件的方法将新的值传递给子组件。例如: ```javascript // 父组件 <Child ref="mychild" :src-list="xxx"/> mounted() { // 通过axios获取数据,假设为rr this.$refs.mychild.getParentData(rr); } // 子组件 methods: { getParentData(val) { this.xxx = val; // 将父组件数据放到自己的data } } ``` 这样,当父组件数据发生变化时,可以通过调用子组件的方法将新的值传递给子组件实现props传值实时更新。 希望对你有帮助!\[2\] #### 引用[.reference_title] - *1* *3* [子组件更新props的属性值,并更新到父组件](https://blog.csdn.net/weixin_62765236/article/details/128949200)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [vue组件动态传值实现数据实时更新](https://blog.csdn.net/qq_33404590/article/details/128724331)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值