父子组件之间相互传值

<button @click="loadVisible = true">点击</button>

<DataLoad></DataLoad>

<DataLoad @child-event="parentEvent" :loadVisible = "loadVisible" @closeModal="closeLoadModal"></DataLoad>

props:{
     loadVisible:‘‘,
},

data(){
    return{
        dataLoadVisible:this.loadVisible,
    }
}    

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

methods:{
　　closeModal() {
　　　　//(6)此处可改变子组件中获取值dataLoadVisible的参数值，若要将值传回给父组件，则需通过函数this.emitToParent()进行。
　　　　this.dataLoadVisible = false;
　　　　this.emitToParent();
　　},
　　emitToParent(){
　　　　//(7)this.$emit("自定义事件名称",所要传递的值)用于组件之间的通信，与父组件中事件相对应，父组件中使用方式为@child-event=""。
　　　　this.$emit(‘child-event‘,this.dataLoadVisible)
　　},
},

 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>

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