vue 组件数据传递

目录

• 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
    }
}