Vue 父传子 不能在子中直接改变父的值 只能通过接收父的方法在父中改变值

父——info.vue:

<!--  -->
<template>
  <div class="info">
    <p>账户信息：{{ accountInfo.profile.account }}</p>
    <p>
      修改密码：
      <span @click="typeBoolean = true" style="color: deepskyblue">
        修改密码
      </span>
    </p>
    <p>昵称：{{ accountInfo.profile.name }}</p>
    <p>生日：{{ accountInfo.profile.birthday }}</p>
    <p>性别：{{ accountInfo.profile.sex === 1 ? "男" : "女" }}</p>
    <p>邮箱：{{ accountInfo.profile.email }}</p>
    <p>电话：{{ accountInfo.profile.phone }}</p>
    <p>
      <el-button type="danger" @click="clearUser">退出登陆</el-button>
    </p>
    <Setpass :type="typeBoolean" :closeBtn="closeBtn"></Setpass>
  </div>
</template>

<script>
import { mapState } from "vuex";
import Setpass from "@/components/info/Setpass.vue";
export default {
  name: "",
  components: {
    Setpass,
  },
  data() {
    return {
      //＊＊初次传给子时是false，若触发template中的点击事件，将变为true
      typeBoolean: false,
    };
  },
  computed: {
    ...mapState({
      accountInfo: (state) => state.user.accountInfo,
    }),
  },
  methods: {
    //＊＊在父中定义一个修改父的值的方法 － 关闭对话框时，将状态改为false，否则，子是无法修改父的方法的
    closeBtn() {
      this.typeBoolean = false;
    },
    //退出登陆
    clearUser() {
      window.sessionStorage.clear();
      this.$router.push("/login");
    },
  },
};
</script>

<style scoped>
.info > p {
  line-height: 30px;
}
</style>

子——Setpass.vue:

<!--  -->
<template>
  <div>
    <el-dialog
      title="修改密码"
      :visible.sync="dialogFormVisible"
      @close="clearText"
    >
      <el-form
        :model="passForm"
        :rules="passFormRules"
        ref="passFormRef"
        label-width="100px"
      >
        <el-form-item label="旧密码" prop="oldPassword">
          <el-input v-model="passForm.oldPassword"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="password">
          <el-input v-model="passForm.password"></el-input>
        </el-form-item>
        <el-form-item label="重复新密码" prop="rePassword">
          <el-input v-model="passForm.rePassword"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="setPass">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import infoApi from "@/utils/api/info";
export default {
  name: "",
  props: ["type", "closeBtn"],
  data() {
    return {
      //＊＊初始对话框状态 - 父传过来对话框的状态为false
      dialogFormVisible: this.type,
      passForm: {
        oldPassword: "",
        password: "",
        rePassword: "",
      },
      passFormRules: {
        oldPassword: [
          { required: true, message: "旧密码不能为空！", trigger: "blur" },
        ],
        password: [
          { required: true, message: "新密码不能为空！", trigger: "blur" },
        ],
        rePassword: [
          { required: true, message: "新密码不能为空！", trigger: "blur" },
        ],
      },
    };
  },
  watch: {
    type(a, b) {
      //＊＊当父级传入的值发生改变 - 比如首次click事件，修改对话框的状态为true
      this.dialogFormVisible = this.type;
    },
  },
  methods: {
    //设置新密码
    setPass() {
      this.$refs.passFormRef.validate((valid) => {
        if (!valid) return;
        if (this.passForm.password !== this.passForm.rePassword) {
          this.$message.error("两次新密码不一致！");
        } else {
          infoApi
            .updatePwd(this.passForm)
            .then((res) => {
              console.log(res);
            })
            .catch((err) => {
              console.log(err);
            });
        }
      });
    },
    //关闭对话框时
    clearText() {
      //重置表单内容
      for (let i in this.passForm) {
        this.passForm[i] = "";
      }
      //**调用父的方法，父的此方法中修改了对话框的状态
      this.closeBtn();
    },
  },
};
</script>

<style scoped>
.el-form {
  padding-right: 20px;
}
</style>