vue中 父子组件的通讯

1、父组件可以使用 props 把数据传给子组件。
2、子组件可以使用 $emit 触发父组件的自定义事件

实例： 父组件: layout.vue  子组件：logform.vue

子组件：

<template>
<div class="login-form">
  <div class="g-form">
    <div class="g-form-line">
      <span class="g-form-label">用户名：</span>
      <input type="text" v-model="usernameModel" placeholder="请输入用户名">
      <span class="g-form-error">{{usernameError.errorText}}</span>
    </div>
    <div class="g-form-line">
      <span class="g-form-label">密码：</span>
      <input type="password" v-model="passwordModel">
      <span class="g-form-error">{{passwordError.errorText}}</span>

    </div>
    <div class="g-form-button">
      <button class="button" @click="login">登陆</button>
    </div>
  </div>
</div>
</template>

子组件中，this.$emit向父组件传递参数res.data

methods: {
    login () {
      if (this.usernameError.status === false || this.passwordError.status === false) {
        alert('部分选项未通过')
      } else {
        this.$http.get('api/login').then(
          (res) => {
            // 子组件只负责触发父组件的事件，而实际的处理内容在父组件中完成
            // console.log(res.data)
            this.$emit('has-log', res.data)
          },
          (error) => {
            console.log(error)
          }
        )
      }
    }
}

父组件中，调用绑定的methods只写方法名，不用带参数。而该方法在父组件中定义时，带参数。

 <myDialog :isShow="isShowLoginDialog" @on-close="closeDialog('isShowLoginDialog')">
    <log-form @has-log="loginSuccess" @close-form="closeDialog('isShowLoginDialog')"></log-form>
  </myDialog>

methods:{
    closeDialog (param) {
      this[param] = false
    },
    loginSuccess (data) {
      console.log(data)
      // this.username = data.username
      // this.closeDialog('isShowLoginDialog')
    }
}