vue之子組件如何修改父組件的值
更新時間：2023年07月03日 14:47:32 作者：Leon_94
這篇文章主要介紹了vue之子組件如何修改父組件的值問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
如何在子組件中修改父組件的值
第一步
首先得保證父組件中有值吧
這是userManage.vue
data（）{
return{
dialogCreate:'false'
}
}第二步
在父組件中引用子組件
import Form from './userCreate'
第三步
父組件中注冊子組件并引用
<template>
<app-form></app-form>
</template>
<script>
export default{
name:'user',
components:{
"app-form":Form
},
data（）{
return{
dialogCreate:'false'
}
}
}
</script>第四步
把父組件的值綁定給子組件上
<app-form v-bind:dialogCreate = "dialogCreate" ></app-form>
第五步
既然父組件把值給了子組件了，子組件得接受和用吧
子組件
1.先接受
export default{
props:['dialogCreate']
}
2.就可以直接在自組建中用了
<p>{{dialogCreate}}</p>第六步
向父組件發(fā)射一個方法
比如我們在后臺數(shù)據(jù)接收成功時，告訴父組件已經(jīng)成功
this.$emit('success',false);第七步
父組件接收到這個方法并且執(zhí)行改變父組件的值
<app-form v-bind:dialogCreate = "dialogCreate" v-on:success="success(res)"></app-form>
methods: {
check(){
alert(1);
},
success(res){
this.dialogCreate = res;
}
}最后，貼上源碼
父組件
<template>
<div class="table">
<div class="crumbs">
<el-breadcrumb separator="/">
<el-breadcrumb-item><i class="el-icon-menu"></i> 表格</el-breadcrumb-item>
<el-breadcrumb-item>基礎(chǔ)表格</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="handle-box">
<el-row :gutter="22">
<el-col :span="6">
<label>登錄名：</label>
<el-input v-model="userName" placeholder="登錄名" class="handle-input mr10"></el-input>
</el-col>
<el-col :span="6">
<label>姓名：</label>
<el-input v-model="realName" placeholder="姓名" class="handle-input mr10"></el-input>
</el-col>
<el-col :span="10">
<label>操作時間：</label>
<!-- <div class="block"> -->
<el-date-picker
v-model="value1"
type="datetimerange"
range-separator="至"
start-placeholder="開始日期"
end-placeholder="結(jié)束日期">
</el-date-picker>
<!-- </div> -->
</el-col>
</el-row>
<el-row :gutter="20" style="margin-top:10px">
<el-col :span="6">
<label>狀態(tài)：</label>
<el-select v-model="isClose" placeholder="匹配狀態(tài)" class="handle-select mr10">
<el-option key="" label="請選擇" value=""></el-option>
<el-option key="1" label="有效" value="0"></el-option>
<el-option key="2" label="無效" value="1"></el-option>
</el-select>
</el-col>
<el-button type="primary" icon="search" @click="search">搜索</el-button>
<el-button type="success" icon="plus" @click="handleCreate">創(chuàng)建</el-button>
</el-row>
</div>
<el-table :data="data" border style="width: 100%" ref="multipleTable" @selection-change="handleSelectionChange">
<!-- <el-table-column prop="date" label="序號" sortable>
</el-table-column> -->
<el-table-column label="序號"
type="index"
:index="indexMethod" width="60px">
</el-table-column>
<el-table-column prop="userName" label="登錄名" >
</el-table-column>
<el-table-column prop="realName" label="姓名" >
</el-table-column>
<el-table-column prop="isClose" label="狀態(tài)" :formatter="states">
</el-table-column>
<el-table-column prop="roleName" label="角色名稱" width="120px">
</el-table-column>
<el-table-column prop="sex" label="性別" :formatter="sex">
</el-table-column>
<el-table-column prop="mobile" label="移動電話" width="120px">
</el-table-column>
<el-table-column prop="email" label="電子郵箱" width="120px">
</el-table-column>
<el-table-column prop="ts" label="操作時間" width="120px">
</el-table-column>
<el-table-column label="操作" width="180">
<template scope="scope">
<!-- <el-button size="small"
@click="handleEdit(scope.$index, scope.row)">編輯</el-button>
<el-button size="small" type="danger"
@click="handleDelete(scope.$index, scope.row)">刪除</el-button> -->
<el-dropdown trigger="click">
<span class="el-dropdown-link">
操作<i class="el-icon-caret-bottom el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-button type="text" class="dropbtn" @click="handleEdit(scope.$index, scope.row)">
查看
</el-button>
<el-button type="text" class="dropbtn">
編輯
</el-button>
<el-button type="text" class="dropbtn">
刪除
</el-button>
<el-button type="text" class="dropbtn">
無效
</el-button>
<el-button type="text" class="dropbtn">
重置密碼
</el-button>
<el-button type="text" class="dropbtn">
分配角色
</el-button>
</el-dropdown-menu>
</el-dropdown>
</template>
</el-table-column>
</el-table>
<div class="pagination">
<el-pagination
@size-change="handleSizeChange"
@current-change ="handleCurrentChange"
:current-page="cur_page"
:page-size="pageSize"
:page-sizes="[5, 10, 15, 30]"
layout="total,sizes,prev, pager, next,jumper"
:total="total">
</el-pagination>
</div>
<!-- 查看彈出框 -->
<el-dialog
title="查看"
:visible.sync="dialogVisible"
width="10%"
:before-close="handleClose">
<div class="form-inline">
<span>  登錄名：</span>
<label id="userNameCheck">{{signName}}</label>
</div>
<div class="form-inline">
<span>    姓名：</span>
<label id="realNameCheck">{{name}}</label>
</div>
<div class="form-inline">
<span>    性別：</span>
<label id="sexCheck">{{sexUser}}</label>
</div>
<div class="form-inline">
<span>移動電話：</span>
<label id="mobileCheck">{{mobile}}</label>
</div>
<div class="form-inline">
<span>電子郵箱：</span>
<label id="emailCheck">{{email}}</label>
</div>
<div class="form-inline">
<span>    狀態(tài)：</span>
<label class="green" id="isCloseCheck">{{isClose}}</label>
</div>
<div class="form-inline">
<span>  終端號：</span>
<label class="" id="terminalNo">{{remark}}</label>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">確 定</el-button>
</span>
</el-dialog>
<!-- 創(chuàng)建彈出框 -->
<el-dialog
title="提示"
:visible.sync="dialogCreate"
width="30%"
:before-close="handleClose">
<app-form v-bind:dialogCreate = "dialogCreate" v-on:success="success(res)"></app-form>
</el-dialog>
</div>
</template>
<script>
import Form from './userCreate'
export default {
name:'user',
components:{
"app-form":Form
},
data() {
return {
url: './static/vuetable.json',
userName:'',
realName:'',
reservation:'',
isClose:'',
tableData: [],
dataObj:{},
cur_page: 1,
multipleSelection: [],
select_cate: '',
select_word: '',
del_list: [],
is_search: false,
value1: ['',''],
total:100,
pageSize:10,
dialogVisible:false,
dialogCreate:false,
signName:'123',
name:'123',
sexUser:'',
mobile:'',
email:'',
isClose:'',
remark:''
}
},
created(){
this.getData();
},
computed: {
data(){
const self = this;
return self.tableData.filter(function(d){
let is_del = false;
for (let i = 0; i < self.del_list.length; i++) {
if(d.name === self.del_list[i].name){
is_del = true;
break;
}
}
return d;
})
}
},
methods: {
check(){
alert(1);
},
success(res){
this.dialogCreate = res;
},
handleCurrentChange(val){
this.cur_page = val;
this.getData(val,this.pageSize);
},
handleSizeChange(val){
this.pageSize = val;
this.getData(this.currentPage,val);
},
getData(num,pageSize){
let self = this;
const params = new URLSearchParams();
var startTime = self.value1[0];
var endTime = self.value1[1];
if(startTime == ''){
startTime = '';
}else{
startTime = self.getTime(startTime);
}
if(endTime == ''){
endTime = ''
}else{
endTime = self.getTime(endTime);
}
self.dataObj = {
userName:self.userName,
realName:self.realName,
isClose:self.isClose,
beginDate:startTime,
endDate:endTime
}
if(!num){
num = 1
}
if(!pageSize){
pageSize = 10
}
let data = self.param(self.dataObj,num,pageSize);
params.append('param',data);
if(process.env.NODE_ENV === 'development'){
self.url = '/s1/copUser/getUserList';
};
self.$axios.post(self.url, params).then((res) => {
self.tableData = res.data.data.list;
self.total = res.data.total;
})
},
indexMethod(index) {
return index + 1;
},
states(row,column){
if(row.isClose == '0'){
return '有效'
}else{
return '無效'
}
},
sex(row){
if(row.sex == '0'){
return '男'
}else{
return '女'
}
},
search(){
this.is_search = true;
this.getData();
},
formatter(row, column) {
return row.address;
},
filterTag(value, row) {
return row.tag === value;
},
handleEdit(index, row) {debugger
this.dialogVisible = true;
this.signName = row.userName;
this.name = row.realName;
if(row.sex == 0){
this.sexUser = '男';
}else{
this.sexUser = '女';
}
if(row.isClose == 0){
this.isClose = '有效'
}else{
this.isClose = '無效'
}
this.mobile = row.mobile;
this.email = row.email;
this.remark = row.remark;
// this.$message('編輯第'+(index+1)+'行');
},
handleCreate(){
this.dialogCreate = true;
debugger
},
handleDelete(index, row) {
this.$message.error('刪除第'+(index+1)+'行');
},
delAll(){
const self = this,
length = self.multipleSelection.length;
let str = '';
self.del_list = self.del_list.concat(self.multipleSelection);
for (let i = 0; i < length; i++) {
str += self.multipleSelection[i].name + ' ';
}
self.$message.error('刪除了'+str);
self.multipleSelection = [];
},
handleSelectionChange(val) {
this.multipleSelection = val;
},
// 關(guān)閉對話框
handleClose(done) {
this.$confirm('確認(rèn)關(guān)閉？')
.then(_ => {
done();
})
.catch(_ => {});
}
}
}
</script>
<style scoped>
.handle-box{
margin-bottom: 20px;
}
.handle-select{
width: 120px;
}
.handle-input{
width: 150px;
display: inline-block;
}
.el-dropdown-link{
color: #22A4E5!important;
cursor: pointer;
}
.dropbtn{
width: 100px;
display: block;
margin-left: 0px!important;
}
.el-dialog--small{
width: 20%!important;
}
</style>子組件
<template>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="登錄名" prop="userName">
<p>{{dialogCreate}}</p>
<el-input v-model="ruleForm.userName" v-on:change="vaildInput(this)"></el-input>
</el-form-item>
<el-form-item label="姓名" prop="realName">
<el-input v-model="ruleForm.realName" v-on:change="vaildInput(this)"></el-input>
</el-form-item>
<el-form-item label="性別" prop="sex">
<el-radio-group v-model="ruleForm.sex">
<el-radio label="男" value="0"></el-radio>
<el-radio label="女" value="1"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="移動電話" prop="mobile">
<el-input v-model="ruleForm.mobile" v-on:change="vaildInput(this)"></el-input>
</el-form-item>
<el-form-item label="電子郵箱" prop="email">
<el-input v-model="ruleForm.email" v-on:change="vaildInput(this)"></el-input>
</el-form-item>
<el-form-item label="狀態(tài)" prop="valid">
<el-radio-group v-model="ruleForm.valid">
<el-radio label="有效"></el-radio>
<el-radio label="無效"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="用戶終端號" prop="remark">
<el-input v-model="ruleForm.remark" v-on:change="vaildInput(this)"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">立即創(chuàng)建</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</template>
<script>
// import Vue from 'vue';
// import Router from 'vue-router';
let Base64 = require('js-base64').Base64;
export default {
props:['dialogCreate'],
data() {
return {
ruleForm: {
userName: '',
realName:'',
mobile:'',
email:'',
remark:'',
},
sex:'',
valid:'',
url:'/s1/copUser/addUser',
dataObj:{},
rules: {
userName: [
{ required: true, message: '請輸入登錄名', trigger: 'blur' },
{ min: 3, max: 5, message: '長度在 3 到 5 個字符', trigger: 'blur' }
],
realName: [
{ required: true, message: '請輸入姓名', trigger: 'blur' }
],
sex: [
{ required: true, message: '請選擇性別', trigger: 'change' }
],
mobile: [
{ required: true, message: '請輸入移動電話', trigger: 'blur' }
],
email: [
{ required: true, message: '請輸入電子郵箱', trigger: 'blur' }
],
valid: [
{ required: true, message: '請選擇狀態(tài)', trigger: 'change' }
],
remark: [
{ required: true, message: '請?zhí)顚懹脩艚K端號', trigger: 'blur' }
]
}
};
},
methods: {
submitForm(formName) {debugger
let self = this;
console.dir(self);
const params = new URLSearchParams();
let sex1 = '',isClose1 = '';
if(self.ruleForm.sex == '男'){
sex1 = 0;
}else{
sex1 = 1;
}
if(self.valid = '有效'){
isClose1 = '1';
}else{
isClose1 = '0';
}
let psw = Base64.encode('123456');
self.dataObj = {
"userName":self.ruleForm.userName,
"realName":self.ruleForm.realName,
"sex":sex1,
"passWord":psw,
"mobile":self.ruleForm.mobile,
"email":self.ruleForm.email,
"remark":self.ruleForm.remark,
"isClose":self.ruleForm.isClose
}
let data = self.paramSingle(self.dataObj);
console.log(data);
params.append('param',data);
if(process.env.NODE_ENV === 'development'){
self.url = '/s1/copUser/addUser';
};
this.$refs[formName].validate((valid) => {
if (valid) {
self.$axios.post(self.url, params).then((res) => {
if(res.code == '0000'){
this.$emit('success',false);
this.$message.success({
message: res.msg
});
}else{
this.$message.error(res.msg);
}
});
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
vaildInput(elem){
console.log(this.$refs.value);
}
}
}
</script>總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue3實現(xiàn)ai聊天對話框功能,本文通過實例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2024-12-12
Vue事件獲取事件對象之event.currentTarget詳解
這篇文章主要介紹了Vue事件獲取事件對象之event.currentTarget,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue.js實戰(zhàn)之組件之間的數(shù)據(jù)傳遞
這篇文章主要介紹了Vue.js實戰(zhàn)之組件之間的數(shù)據(jù)傳遞的相關(guān)資料，文中通過示例代碼和圖文介紹的非常詳細(xì)，對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。2017-04-04
element-plus的自動導(dǎo)入和按需導(dǎo)入方式詳解
之前使用 ElementPlus 做項目的時候,由于不會使用按需引入耽誤了不少時間,這篇文章主要給大家介紹了關(guān)于element-plus自動導(dǎo)入和按需導(dǎo)入的相關(guān)資料,需要的朋友可以參考下2022-08-08
element tree懶加載:load="loadNode"只觸發(fā)一次的解決方案
本文主要介紹了element tree懶加載:load="loadNode"只觸發(fā)一次的解決方案，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
這篇文章主要介紹了Ant Design Pro 菜單自定義 icon，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要為大家詳細(xì)介紹了vue.js實現(xiàn)雙擊放大預(yù)覽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
這篇文章主要為大家詳細(xì)介紹了Vue.js的Class與樣式綁定,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
這篇文章主要介紹了vue-cli3項目在IE瀏覽器打開兼容問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
Vite默認(rèn)集成了對Sass的支持,你只需要安裝Sass本身即可,這篇文章主要介紹了vite 項目中如何使用Sass,需要的朋友可以參考下2024-04-04