vue—子元件修改父元件的值
阿新 • • 發佈：2020-08-03
如何在子元件中修改父元件的值
第一步：首先得保證父元件中有值吧
這是userManage.vue
data（）{
return{
dialogCreate:'false'
}
}- 1
- 2
- 3
- 4
- 5
第二步：在父元件中引用子元件
import Form from './userCreate'- 1
第三步：父元件中註冊子元件並引用
<template>
<app-form></app-form>
</template>
<script>
export default{
name:'user',
components:{
"app-form":Form
},
data（）{
return{
dialogCreate:'false'
}
}
}
</script> - 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
第四步：把父元件的值繫結給子元件上
<app-form v-bind:dialogCreate = "dialogCreate" ></app-form>- 1
第五步：既然父元件把值給了子元件了，子元件得接受和用吧
子元件
1.先接受
export default{
props:['dialogCreate']
}
2.就可以直接在自組建中用了
<p>{{dialogCreate}}</p>- 1
- 2
- 3
- 4
- 5
- 6
第六步：向父元件發射一個方法
比如我們在後臺數據接收成功時，告訴父元件已經成功
this.$emit('success',false);- 1
第七步：父元件接收到這個方法並且執行改變父元件的值
<app-form v-bind:dialogCreate = "dialogCreate" v-on:success="success(res)"></app-form>
methods: {
check(){
alert(1);
},
success(res){
this.dialogCreate = res;
}
}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
最後，貼上原始碼
父元件
<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>基礎表格</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="結束日期">
</el-date-picker>
<!-- </div> -->
</el-col>
</el-row>
<el-row :gutter="20" style="margin-top:10px">
<el-col :span="6">
<label>狀態：</label>
<el-select v-model="isClose" placeholder="匹配狀態" 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">建立</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="狀態" :formatter="states">
</el-table-column>
<el-table-column prop="roleName" label=