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')
}
}