Vue 之 组件之间的传值通信（多种方法，简洁而不失重点）

一、数据的通信

父组件给子组件传值（子组件使用父组件的数据）

1、父组件给子组件传值使用 props 接收

父组件

<template>
    <div>
    	<child :msg="message"></child>
    </div>
</template>

<script>
	import child from '@/components/Child.vue';
	export default {
	    components: {
	        child
	    },
	    data() {
	    	return {
				message: 'abc'
			}
	    }
	}
</script>

子组件

<template>
    <div>
    	<button @click="childProps">点击</button>
    </div>
</template>

<script>
	export default {
	    props: {
	        msg: {
		        type: String,
		        require: false,
		        default: ''
	        }
	    },
	    methods: {
	        childProps() {
		        if (this.msg) {
		          console.log(this.msg); // abc
		        }
	        }
	    }
	}
</script>

 
 

子组件给父组件传值（父组件使用子组件的数据）

1、子组件给父组件传值使用 emit

父组件

<template>
    <div>
    	<child @change='changeHandle'></child>
    </div>
</template>

<script>
	import child from '@/components/Child.vue';
	export default {
	    components: {
	        child
	    },
	    data() {
	    	return {
				
			}
	    },
	    methods: {
		    changeHandle(arguments){
		        console.log(arguments) // 1, 2, 3, 4, 5
		    }
		}
	}
</script>

子组件

<template>
    <div>
	    <button @click="handleClick">点击</button>
    </div>
</template>

<script>
	export default {
		name: 'Child',
	    methods: {
		    handleClick() {
		      this.$emit('change', 1, 2, 3, 4, 5) // 参数1，使用调用子组件时定义的事件，参数2~max，需要传送的值
		    }
	    }
	}
</script>

 

2、直接使用 ref 获取

父组件

<template>
    <div>
	    <child ref='child'></child>
	    <button @click='getMessage'>测试</button>
    </div>
</template>

<script>
	import child from '@/components/Child.vue';
	export default {
	    components: {
	        child
	    },
	    data() {
	    	return {
				
			}
	    },
	    methods: {
		    getMessage(){
		        console.log(this.$refs.child.message) // asb
		    }
		}
	}
</script>

子组件

<template>
    <div>
    	<button>测试</button>
    </div>
</template>

<script>
	export default {
		name: 'Child',
	    data() {
	    	return {
				message: 'asb'
			}
	    },
	    methods: {
	      
	    }
	}
</script>

  
 
 

二、方法的调用

 

子组件调用父组件的方法

1、直接在子组件中通过 this.$parent.event 来调用父组件的方法

父组件

<template>
    <div>
    	<child></child>
    </div>
</template>

<script>
	import child from '@/components/Child.vue';
	export default {
	    components: {
	        child
	    },
	    methods: {
	        fatherMethod() {
	        	console.log('测试');
	        }
	    }
	}
</script>

子组件

<template>
    <div>
    	<button @click="childMethod">点击</button>
    </div>
</template>

<script>
	export default {
	    methods: {
	        childMethod() {
	        	this.$parent.fatherMethod();
	        }
	    }
	}
</script>

 
 

2、在子组件里用 emit 向父组件触发一个事件，父组件监听这个事件就行了

 
父组件

<template>
    <div>
    	<child @test="fatherMethod"></child>
    </div>
</template>

<script>
	import child from '@/components/Child.vue';
	export default {
	    components: {
	        child
	    },
	    methods: {
	        fatherMethod() {
	        	console.log('测试');
	        }
	    }
	}
</script>

子组件

<template>
    <div>
    	<button @click="childMethod">点击</button>
    </div>
</template>

<script>
	export default {
	    methods: {
	        childMethod() {
	        	this.$emit('test');
	        }
	    }
	}
</script>

 
 

3、父组件通过 props 把方法传入子组件中，在子组件里直接调用这个方法

 
父组件

<template>
    <div>
    	<child :child="fatherMethod"></child>
    </div>
</template>

<script>
	import child from '@/components/Child.vue';
	export default {
	    components: {
	        child
	    },
	    methods: {
	        fatherMethod() {
	        	console.log('测试');
	        }
	    }
	}
</script>

子组件

<template>
    <div>
    	<button @click="childMethod">点击</button>
    </div>
</template>

<script>
	export default {
	    props: {
	        child: {
		        type: Function,
		        default: null
	        }
	    },
	    methods: {
	        childMethod() {
		        if (this.child) {
		            this.child();
		        }
	        }
	    }
	}
</script>

 
 

父组件使用子组件的方法

 

1、通过 ref 直接调用子组件的方法

父组件

<template>
    <div>
        <Button @click="handleClick">点击调用子组件方法</Button>
        <Child ref="child"/>
    </div>
</template>    

<script>
	import Child from '@/components/Child.vue';
	export default {
	    methods: {
	        handleClick() {
	            this.$refs.child.sing();
	        },
	    },
	}
</script>

子组件

<template>
    <div>我是子组件</div>
</template>

<script>
	export default {
		methods: {
		    sing() {
		        console.log('我是子组件的方法');
		    },
		},
	}
</script>

 
 
 

如有不足，望大家多多指点！ 谢谢！