vue父元件調子元件 $refs (把父元件的資料傳給子元件)
阿新 • • 發佈:2018-12-29
父元件:
<el-dialog title="" @close="refresh" :visible.sync="userRoleVisible" @open="showAuthEvent">
<user-role-panel ref="authPanel"></user-role-panel>
</el-dialog>
:標籤是根據子元件的名稱按駝峰命名中間用‘-’隔開。
import userRolePanel from './userrole';//引入子元件
export default {
name: 'userList' ,
components: {userRolePanel},//註冊元件
methods: {
parentCall () {
//authPanel <user-role-panel>標籤中ref的值
this.$refs.authPanel.init(
this.tempData.userName,
this.tempData.userId,
this.tempData.roleIds);
}
}
}
子元件:
export default {
name: 'userRole',
data() {
return {
tempData: {
userId: undefined,
userName: undefined,
userRole: undefined
}
}
methods: {
init(uname, uid, rid) {
userId: uid,
userName: uname,
userRole: rid
};
}
}