父子组件传值
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>