关于VUE中子组件向父组件传值的实际操作

关于VUE中子组件向父组件传值的实际操作 2023-05-22 887

一、首先，子组件定义好需要传递的值

子组件在自身的data中定义号需要传递的值

data() {
    return {
      addMsgdata: {
        name: "",
        age: "",
        address: "",
      },
    };
  },

二、将值通过$emit进行传递

子组件在需要触发传值给父组件的事件中，设置emit，通过emit将事件和值抛给父组件。

addMsg() {
        this.$emit("addMsg", this.addMsgdata);
        //传递后需做置空处理，不然会导致子组件与父组件的值绑定改变
        this.addMsgdata = {
          name: "",
          age: "",
          address: "",
        };
        this.$Message["success"]({
          background: true,
          content: "添加成功",
        });
    },

三、父组件进行接收

父组件通过标签绑定的形式绑定子组建emit的时间方法，再通过构造响应的事件，事件的参数就是子组件传递的值。

<addMsg
      v-on:addMsg="addMsg" //通过on在子组件中进行事件绑定接收
    ></addMsg>

    addMsg(val) {
      //val参数就是子组件传递的值
      let data = val;
      //值的使用
      this.data.push(data);
    },