Vue父子组件的通信的四种方式

一、父组件引用子组件的属性及方法

在子组件标签中添加ref属性，并赋值一个名字

<NavBar ref="header"></NavBar>

1.父组件调用子组件的方法及属性

this.$refs.header.msg;//调用子组件的属性
this.$refs.header.fn();//调用子组件的方法

二、子组件引用父组件的属性及方法

1.子组件调用父组件的方法及属性

this.$parent.parentFn();//调用父组件的方法
this.$parent.parent;	//调用父类的属性

2.子组件调用父组件的方法及属性（带约束）

第一种，父组件里写入给定的属性或方法

<NavBar :login="login" :loginFn="loginFn"></NavBar>

子组件配置props属性

props:{
      login:{
        type:String,
        default:null
      },
      loginFn:{
        type: Function,
        default: null
      }
    },

第二种

父组件中在

<NavBar @loginFn="loginFn"></NavBar>

子组件中

this.$emit('loginFn');

具体的this. $emit();应该是this.$emit(“function”,param);这种类型的

同步传

//子组件
this.$emit('update:loginSuccessUser', this.loginSuccessUser);

父组件中

 import PCHeader from '../commons/PCHeader';

  export default {
    name: "PPersonalData",
    components: {
      PCHeader
    },
    data() {
      return {
        loginSuccessUser: {}, //登录成功后的用户对象
        }
    }    

//父组件
<PCHeader :loginSuccessUser.sync="loginSuccessUser"></PCHeader>

这样就给父组件中的loginSuccessUser附上值了

参考this.$emit()的链接
vue组件间的通信（特别详细）