zoukankan      html  css  js  c++  java
  • 父子组件之间相互传值

    在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=" 530px" v-model="publishParam.name" placeholder="请输入名称"></Input>
            </FormItem>
            <FormItem label="领域:" prop="field">
              <Select style=" 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=" 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>
  • 相关阅读:
    Java实现 蓝桥杯VIP 算法训练 黑色星期五
    Java实现 蓝桥杯VIP 算法训练 比赛安排
    Java实现 蓝桥杯VIP 算法训练 比赛安排
    Java实现 蓝桥杯VIP 算法训练 斜率计算
    Java实现 蓝桥杯VIP 算法训练 斜率计算
    Java实现 蓝桥杯VIP 算法训练 整数平均值
    Java实现 蓝桥杯VIP 算法训练 整数平均值
    控件动态产生器(使用RegisterClasses提前进行注册)
    Delphi编写自定义控件以及接口的使用(做了一个TpgDbEdit)
    Log4delphi使用心得
  • 原文地址:https://www.cnblogs.com/qing0228/p/14252445.html
Copyright © 2011-2022 走看看