在vue中，父子组件的关系可以总结为prop向下传递，事件向上传递。父组件通过prop给子组件下发数据，子组件通过事件给父组件发送信息。
(1)通过点击事件，将 loadVisible 值改为 true ,由此触发子组件；<button @click="loadVisible = true">点击</button>(2)使用组件,当 loadVisible 值为true时，值通过子组件<DataLoad></DataLoad>
中的loadVisible 传递到子组件，子组件通过 watch 进行监听；<DataLoad @child-event="parentEvent" :loadVisible = "loadVisible" @closeModal="closeLoadModal"></DataLoad>(3)父组件向子组件传递的值为loadVisible ，通过 props ；props:{
loadVisible:'',
},(4)此处将父组件传递的值赋给 data(){return{}} 中新创建的参数 dataLoadVisible ；data(){
return{
dataLoadVisible:this.loadVisible,
}
}(5)将data中获取到的父组件的值，通过另一参数名 dataLoadVisible 在子组件中进行使用；<Modal v-model="dataLoadVisible"
title="子组件弹框"
@on-cancel="closeModal"
:width=724>
<div slot="footer">
<Button @click="closeModal">取消</Button>
<Button type="primary" @click="loadHandleSubmit('publishForm')">确定</Button>
</div>
</Modal>(6)此处可改变子组件中获取值 dataLoadVisible 的参数值，若要将值传回给父组件，则需通过函数 this.emitToParent() 进行。methods:{
closeModal() {
//(6)此处可改变子组件中获取值dataLoadVisible的参数值，若要将值传回给父组件，则需通过函数this.emitToParent()进行。
this.dataLoadVisible = false;
this.emitToParent();
},
emitToParent(){
//(7)this.$emit("自定义事件名称",所要传递的值)用于组件之间的通信，与父组件中事件相对应，父组件中使用方式为@child-event=""。
this.$emit('child-event',this.dataLoadVisible)
},
},(7) this.$emit("自定义事件名称",所要传递的值) 用于组件之间的通信，与父组件中事件相对应，父组件中使用方式为 @child-event="" 。(8)子组件值回传，回传方式通过(2)处代码。1、父组件
1 <template>
2 <div>
3 <!--(1)通过点击事件，将loadVisible值改为true,由此触发子组件-->
4 <button @click="loadVisible = true">点击</button>
5 <!--(2)使用组件,当loadVisible值为true时，值通过子组件DataLoad中的loadVisible传递到子组件，子组件通过watch进行监听-->
6 <DataLoad @child-event="parentEvent" :loadVisible = "loadVisible" @closeModal="closeLoadModal"></DataLoad>
7 </div>
8 </template>
9 <script>
10 //引入子组件
11 import DataLoad from './dataLoad.vue'
12
13 export default{
14 name:'index',
15 //引入子组件
16 components:{DataLoad},
17 data(){
18 return {
19 loadVisible:false,
20 }
21 },
22 methods:{
23 //(8)子组件值回传,回传方式通过(2)处代码。
24 parentEvent(data){
25 this.loadVisible = data;
26 },
27 closeLoadModal(){
28 this.loadVisible = false;
29 },
30 }
31 }
32 </script>2、子组件，子组件名称为dataLoad.vue
<template>
<div>
<!--(5)将data中获取到的父组件的值，通过另一参数名dataLoadVisible在子组件中进行使用-->
<Modal v-model="dataLoadVisible"
title="子组件弹框"
@on-cancel="closeModal"
:width=724>
<Form ref="publishForm" :model="publishParam" :rules="rules" :label-width=110 label-position="right">
<FormItem label="名称：" prop="name">
<Input style="width: 530px" v-model="publishParam.name" placeholder="请输入名称"></Input>
</FormItem>
<FormItem label="领域：" prop="field">
<Select style="width: 250px" v-model="publishParam.field" placeholder="请选择申请领域" clearable>
<Option v-for="item in fields" :value="item.id" :key="item.id">{{ item.name }}</Option>
</Select>
</FormItem>
<FormItem label="描述：" prop="description">
<Input
style="width: 530px"
type="textarea"
:rows=5
:maxlength=200
v-model="publishParam.description"
show-word-limit
placeholder="请输入描述信息"
></Input>
</FormItem>
</Form>
<div slot="footer">
<Button @click="closeModal">取消</Button>
<Button type="primary" @click="loadHandleSubmit('publishForm')" v-if="!publishParam.id">确定</Button>
</div>
</Modal>
</div>
</template>
<script>
import {getInudstry,loadData} from "./api";
export default {
name: "dataLoad",
//(3)父组件向子组件传递的值为loadVisible，通过props。
props:{
loadVisible:'',
},
data(){
return{
publishParam: {
description: '',
field: '',
name:'',
},
rules: {
name: [
{ required: true, message: '请输入名称', trigger: 'blur' }
],
description: [
{ required: true, message: '请输入描述信息', trigger: 'blur' }
],
field: [
{ required: true, message: '请选择申请领域', trigger: 'change' }
],
},
fields:'',//通过接口获取所有申请领域信息
//(4)此处将父组件传递的值赋给data()return{}中新创建的参数dataLoadVisible
dataLoadVisible:this.loadVisible,
userId:sessionStorage.getItem("userId")
}
},
methods:{
getLoadOptionData(){
getInudstry({
"type": "field"
}).then((result) => {
if (result.data.data) {
let data = [];
for (let i = 0; i < result.data.data.length; i++) {
data.push({
"id": result.data.data[i]["name"],
"name": result.data.data[i]["name"]
})
}
this.fields = data;
}
}).catch((err) => {
});
},
loadHandleSubmit(name){
//验证表单是否根据rules填写完整
this.$refs[name].validate((valid) => {
if (valid) {
loadData({
"description": this.publishParam.description,
"field": this.publishParam.field,
"name":this.publishParam.name,
})
.then((result) => {
if (result.data.status) {
this.$Message.success(result.data.message)
this.dataLoadVisible = false;
this.emitToParent();
} else {
this.$Message.error(result.data.message)
}
})
.catch((err) => {
this.$Modal.warning({
title: "提示",
content: err
});
});
} else {
this.$Message.error('请将表单填写完整!');
}
})
},
closeModal() {
//(6)此处可改变子组件中获取值dataLoadVisible的参数值，若要将值传回给父组件，则需通过函数this.emitToParent()进行。
this.dataLoadVisible = false;
this.emitToParent();
},
emitToParent(){
//(7)this.$emit("自定义事件名称",所要传递的值)用于组件之间的通信，与父组件中事件相对应，父组件中使用方式为@child-event=""。
this.$emit('child-event',this.dataLoadVisible)
},
},
mounted(){
this.getLoadOptionData();
},
//监听父组件中值的变化
watch:{
loadVisible(val){
this.dataLoadVisible = val;
}
}
}
</script>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
