Vue父子组件互传数据详细流程

Posted 2022-10-15 364.99°

父组件引用子组件，并注册组件流程：

• 引用:

  import psnTable from "@/scopes/project/demo2/modulePart/demo2/part/psnTable";
  

• 注册：

  components: psnTable,
  

• 使用组件：

  <psnTable/>
  

1.父组件向子组件传递数据

这个很简单，流程如下：

• 父组件data中定义一个对象，用来存储数据

  data () 
  	return 
  		psnTableInfo: [],
  	
  
  

• 子组件v-bind绑定 psnTableInfo

  <psnTable :psnTableInfo="psnTableInfo"/>
  

• 子组件中props接收父组件的数据 psnTableInfo

  props: ['psnTableInfo'],
  

  这时候，在子组件中就可以通过this.psnTableInfo调用父组件传过来的数据了

2.子组件向父组件传递数据

子组件不能直接向父组件传递数据，需要通过调用父组件的方法来传递数据

实现流程：

• 在子组件的data中定义一个对象存储数据

  data () 
  	return 
  		psnTableInfo: [],
  	
  
  

• 在父组件的data中也定义一个对象存储数据

  data () 
  	return 
  		psnTableData: [],
  	
  
  

• 在父组件methods中定义一个方法，用来给 psnTableData 赋值

      getPsnTableInfo (value) 
        this.psnTableData = value
      ,
  

• 子组件v-on绑定 getPsnTableInfo 方法

  <psnTable @putPsnTableInfo="getPsnTableInfo"/>
  

• 在子组件中调用父组件的方法（可以用this.$parent或this.$emit），个人建议使用this.$emit
  这里就使用一个watch来检测 psnTableInfo ，其值一旦变化，就给父组件的 psnTableData 赋值

  watch: 
  	psnTableInfo: 
  		handler (newValue, oldValue) 
  			this.$emit('putPsnTableInfo', newValue)
  		,
  		immediate: true,
  	
  
  

这样，就实现了子组件向父组件传递数据的需求。

3.补充——$refs的用法

可以直接使用 this.$refs.子组件ref.子组件属性/方法 的方法获让父组件获取到子组件的属性或方法

实现流程：

• 给父组件中的子组件标签加上一个ref属性

  <psnTable ref="psnTable"/>
  

• 在子组件的data中定义一个对象存储数据

  data () 
  	return 
  		psnTableInfo: [],
  	
  
  

• 在父组件中定义一个方法获取子组件的数据 psnTableInfo

  data () 
  	return 
  		psnTableData: [],
  	
  ,
  methods: 
  	getPsnTableData () 
  		this.psnTableData = this.$refs.psnTable.psnTableInfo
  	,
  	setPsnTableData () 
  		this.getPsnTableData()
  	
  
  

注意： this.$refs.ref.属性名 只能获取到vue中的数据，也就是data中的数据。