父子组件传值

父子组件传值

1.把父组件中的数据传给子组件

步骤图片：

父组件中：

子组件中：

代码：

​ 1.子组件中：

<template>
  <div>
    <div>
      <v-alert dense :type="alertType" :value="alertValue">
        {{ myAlertText }}
        <v-icon class="xicon" @click="xiconClick()"> mdi-close-circle</v-icon>
      </v-alert>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    myAlertText: {
      type: String,
      default: "",
    },
    alertValue: {
      default: false,
    },
    alertType: {
      type: String,
      default: "", //默认是" "的话，初始的时候，警告框是不显示的
    },
  },
  methods: {
    //点击子组件在父组件里边做操作
    xiconClick() {
      this.$emit("update");
    },
  },
};
</script>
<style>
.xicon {
  margin-left: 60px;
}
</style>

​ 2.父组件中：

<template>
  <div>
    <gxalert
      :myAlertText="myAlertTextFromFather"
      :alertType="alertTypeFromFather"
      :alertValue="alertValueFromFather"
      @update="xiconClickFather()"
    ></gxalert>
  </div>
</template>
<script>
import gxalert from "./testdialog1.vue";

export default {
  components: {
    gxalert,
  },
  data() {
    return {
      myAlertTextFromFather: "myAlertTextFromFather1",
      alertTypeFromFather: "error",
      alertValueFromFather: true,
    };
  },
  methods: {
    xiconClickFather() {
      if (this.alertValueFromFather == true) {
        this.alertValueFromFather = false;
      }
    },
  },
};
</script>

2.在子组件中点击或者更新啥的，引发父组件中的额数据发生变化，（有时候会根据这个数据的变化去控制父组件中的事件方法啥的）

步骤图片：

子组件中：

父组件中：

代码：

1.子组件中：

<template>
  <div>
    <div>
      <v-alert dense :type="alertType" :value="alertValue">
        {{ myAlertText }}
        <v-icon class="xicon" @click="xiconClick()"> mdi-close-circle</v-icon>
      </v-alert>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    myAlertText: {
      type: String,
      default: "",
    },
    alertValue: {
      default: false,
    },
    alertType: {
      type: String,
      default: "", //默认是" "的话，初始的时候，警告框是不显示的
    },
  },
  methods: {
    //点击子组件在父组件里边做操作
    xiconClick() {
      this.$emit("update");
    },
  },
};
</script>
<style>
.xicon {
  margin-left: 60px;
}
</style>

2.父组件中：

<template>
  <div>
    <gxalert
      :myAlertText="myAlertTextFromFather"
      :alertType="alertTypeFromFather"
      :alertValue="alertValueFromFather"
      @update="xiconClickFather()"
    ></gxalert>
  </div>
</template>
<script>
import gxalert from "./testdialog1.vue";

export default {
  components: {
    gxalert,
  },
  data() {
    return {
      myAlertTextFromFather: "myAlertTextFromFather1",
      alertTypeFromFather: "error",
      alertValueFromFather: true,
    };
  },
  methods: {
    xiconClickFather() {
      if (this.alertValueFromFather == true) {
        this.alertValueFromFather = false;
      }
    },
  },
};
</script>

效果图