目录
- header.vue【子组件】
- login.vue【父组件】
父-》子
header.vue
export default {
// 不在 data(){} 里面定义
props: [
'active'
],
}
login.vue
HTML
// 接收数据
<mrz-step :active="0" />
子-》父
header.vue
HTML
// 输入框触发方法
<input v-model="username" @change="setInfo"/>
js
methods: {
setInfo() {
// 定义事件名称,传递参数
this.$emit('transferUser ', this.username)
}
}
login.vue
HTML
// 接收子组件定义的事件,获取数据
<mrz-step @transferUser ="getUser" />
js
methods: {
// 接收子组件的数据
getUser(msg) {
this.username = msg
}
}