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

ゞ浴缸里的玫瑰 2023-09-26 05:24 40阅读 0赞

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

*  引用:
    
        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中的数据。