Vue父子组件传值（通信）

前言：又到了一年一度的金三银四，相信有很多小伙伴都会这个时间段跳槽，当然面临跳槽，不乏要去刷一些面试题，看到有好多小伙伴都有被问到这个问题，所以今天为大家整理这个知识点，我不多逼逼，直接进入正题。

一，父子组件的传参

1.父传子

1. 在父组件中注册使用子组件
2. 在子组件中创建props属性，用来接收传值
3. 在子组件的props的属性中添加父组件的传值msg

父组件代码

				<template>
				 <div class="home">
				    <Child :msg="我是父组件传的msg"/>
				  </div>
				</template>
		
				<script>
				import Child from '@/components/child.vue'
				
				export default {
				  components: {
				    Child
				  }
				}
				</script>

子组件代码

				<template>
				  <div class="hello">
				    <h3>{{ msg }}</h3>
				  </div>
				</template>
				
				<script>
				export default {
				  props: {
				    msg: String
				  }
				}
				</script>

2.子传父

1. 子传父传值的实现需要事件的触发通过$emit发送给父组件
2. 在父组件注册使用子组件，在子组件标签上使用v-on绑定对自定义事件的监听
3. 在子组件通过事件的触发通过$emit把参数传递给父组件（参数1：父组件的监听事件，参数2：子组件要传的值）

父组件代码

				<template>
				  <div class="home">
				      <span>{{parentMsg}}</span>
				    <Child v-on:getChildMsg="getChildMsg"/>
				  </div>
				</template>
				<script>
				import Child from '@/components/child.vue'
				export default {
				  components: {
				    Child
				  },
				  data(){
				      return{
				          parentMsg:'父组件定义的值'
				      }
				  },
				  methods:{
				      getChildMsg(res){
				          this.parentMsg=res
				      }
				  }
				}
				</script>

子组件代码

				<template>
				  <div class="hello">
				    <button @click="sendMsg">传给父组件</button>
				  </div>
				</template>
				
				<script>
				export default {
				  data(){
				      return{
				          childMsg:"我是子组件的传值"
				      }
				  },
				  methods:{
				      sendMsg(){
				          this.$emit("getChildMsg",this.childMsg)
				      }
				  }
				}
				</script>

二，父组件调用子组件的方法

1. 在父组件中注册子组件并使用，在子组件标签上使用ref属性
2. 在子组件中写一个自定义方法
3. 在父组件通过子组件标签上的ref属性值来调用子组件的自定义方法

父组件代码

				<template>
				  <div class="home">
				    <button @click="parentChild">调用子组件方法</button>
				    <Child ref="childMothod"/>
				  </div>
				</template>
				<script>
				import Child from '@/components/child.vue'
				export default {
				  components: {
				    Child
				  },
				  methods:{
				      parentChild(){
				          this.$refs.childMothod.changeText("父组件调用了changeText方法");
				      }
				  }
				}
				</script>

子组件代码

				<template>
				  <div class="hello">
				      <span>{{childMsg}}</span>
				  </div>
				</template>
				
				<script>
				export default {
				  data(){
				      return{
				          childMsg:"我是子组件的默认值"
				      }
				  },
				  methods:{
				    changeText(data){
				          this.childMsg=data;
				    }
				  }
				}
				</script>

三，使用provide 与 inject传参

1. 在父组件中注册使用子组件。
2. 在父组件利用provide方法return出要传的值。
3. 在子组件通过inject方法接收参数

父组件代码

				<template>
				    <div class="home">
				        <Child />
				    </div>
				</template>
				<script>
				import Child from "@/components/child.vue";
				export default {
				    components: {
				        Child,
				    },
				    data() {
				        return {
				            parentMsg: "父组件的参数",
				        };
				    },
				    provide() {
				        return {
				            msg: this.parentMsg
				        };
				    },
				};
				</script>

子组件代码

				<template>
				    <div class="hello">
				        <span>子组件接收的参数++++{{msg}}</span>
				    </div>
				</template>
				
				<script>
				export default {
				    name: "child",
				    inject: ["msg"],
				};
				</script>

四，通过parent与children传参

父组件访问子组件

1. 在父组件注册并使用子组件，
2. 在父组件中利用$children方法获取子组件中的data数据

父组件代码

注意：this.$children[0] 可以获取到子组件中data里定义的所有参数，所以子组件的代码也就没有贴的必要了；

				<template>
				    <div class="home">
				        <p>{{parentMsg}}</p>
				        <button @click="getChildMsg">获取子组件的传值</button>
				        <Child />
				    </div>
				</template>
				<script>
				import Child from "@/components/child.vue";
				export default {
				    components: {
				        Child,
				    },
				    data() {
				        return {
				            parentMsg: "父组件的默认值",
				        };
				    },
				    methods:{
				        getChildMsg(){
				            this.parentMsg=this.$children[0].childMsg;
				        }
				    }
				};
				</script>

子组件访问父组件

1. 在父组件注册并使用子组件，
2. 在子组件中利用$parent方法获取父组件中的data数据

子组件代码

注意：this.$parent 可以获取到父组件中data里定义的所有参数，所以父组件的代码也就没有贴的必要了；

			<template>
				    <div class="hello">
				        <p>{{childMsg}}</p>
				        <button @click="getParentMsg">获取父组件的传值</button>
				    </div>
				</template>
				
				<script>
				export default {
				    name: "child",
				    data(){
				        return{
				            childMsg:'子组件的默认值'
				        }
				    },
				    methods:{
				        getParentMsg(){
				            this.childMsg=this.$parent.parentMsg;
				        }
				    }
				};
				</script>