(标签页的数据二选一)在tabs标签页下的两个标签,我通过自定义函数来获取标签页下组件的内容;我需要把在哪个标签页下对应的内容传给父组件;但是遇到的问题就是我监听activeName的变化判断当前是哪个标签页,但是标签页是监听到了,但是她下面的内容我必须通过切换了才能获取到数据(我标签页的组件也是改变一个就传上来的数据,但是默认的时候监听不知道在监听activeName的时候那个获取到组件的内容如何同步监听到然后传到父组件去),所以我在默认停在当前标签页的时候,传递过去的数据是空的,我必须切换一下标签页数据才能准确的传递到父组件上去;
其实我想要的效果是获取这个标签页对应的数据然后传递给父组件,但是没想到其他方法;就用的这个方法;各位朋友能有什么简便的方法吗?或者是我这个方法可行然后帮帮我解决这个问题
讲的是有点混乱,各位朋友哪没明白就直接问,我秒回;
表格的标签页
<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
<el-tab-pane label="装备数据" name="first">
<equList v-bind="$attrs" v-on="$listeners" @firstBind="firstBind" />
</el-tab-pane>
<el-tab-pane label="手动填写" name="second">
<equListManual
v-bind="$attrs"
v-on="$listeners"
@secondBind="secondBind"
/>
</el-tab-pane>
</el-tabs>
进行的操作判断传值
export default {
components: {
equList,
equListManual,
},
props: {},
watch: {},
data() {
return {
workplanId: "",
activeName: "first",
};
},
watch: {
//监听判断内容属于哪个标签页进行传值
activeName: {
handler(val) {
console.log(
"tab标签的切换值",
val,
this.taskJournalProcessfirst,
this.taskJournalProcesssecond
);
if (val == "first") {
this.$emit("todo", this.taskJournalProcessfirst);
} else {
this.$emit("todo", this.taskJournalProcesssecond);
}
},
immediate: true,
},
},
created() {},
methods: {
//切换改变activeName的值
handleClick(val) {
this.activeName = val.name;
},
//第一个标签页的值
firstBind(val) {
this.taskJournalProcessfirst = val;
},
//获取第二个标签页的值
secondBind(val) {
this.taskJournalProcesssecond = val;
},
},
};