vue父子组件之间的通信

一、父组件传值给子组件

1.子组件，首先定义一个子组件，然后在子组件中注册props，然后创建一个名为infos的属性，用来接收从父组件传过来的数据

<template>
  <div>
    <div>{{infos}}</div>
  </div>
</template>
<script>
  export default {
    // 接受父组件的值
    props:{
        infos:{
          type:String //传值的数据类型
        }
      },
  }
</script>
<style>
</style>

2.父组件，在父组件中引入子组件,并加入子组件标签，在子组件标签中添加子组件props中创建的属性，将值通过该属性传递给子组件

<template>
    <div>
        <div>父组件</div>
        <child :infos="parentInfo"></child>  
    </div>
</template>
 
<script>
 
import child from './child'  //引入child组件
export default {
    data() {
            return {
                parentInfo: 'a message from parent'  //在data中定义需要传入的值
            }
        },
        components: {
            child
        }
}
</script>
<style>
</style>

 

二、子组件传值给父组件

1.子组件

首先子组件要触发一个自定义事件；然后将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法（下面的例子是传递多个数据的处理方法），可按自己的业务逻辑设置传的值的数据格式与内容。

<template>
  <div>
    <div @click="toParent('信息一','信息二')"></div>
  </div>
</template>
<script>
  export default {
     methods:{
        //此处是传递了多个参数，根据自己的业务逻辑处理
	toParent(info1,info2){
            var infos = [info1,info1]
            this.$emit("listenToParent",infos);
        }
      }
  }
</script>
<style>
</style>

2.父组件

在父组件中注册子组件，并加入子组件标签，子组件标签上绑定对自定义事件的监听，在监听的方法里面即可拿到子组件传过来的值

<template>
    <div>
        <div>父组件</div>
        <child v-on:listenToParent="getChildMsg"></child>  
    </div>
</template>
 
<script>
 
import child from './child'  //引入child组件
export default {
    data() {
            return {
                
            }
        },
        components: {
            child
        },
        methods:{
            getChildMsg:function(msg){
              console.log(msg)
            }
        }
}
</script>
<style>
</style>