其实我想要的效果是获取这个标签页对应的数据然后传递给父组件,但是没想到其他方法;就用的这个方法;各位朋友能有什么简便的方法吗?或者是我这个方法可行然后帮帮我解决这个问题
讲的是有点混乱,各位朋友哪没明白就直接问,我秒回;
<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
<el-tab-pane label="装备数据" name="first">
"$attrs" v-on="$listeners" @firstBind="firstBind" />
el-tab-pane>
<el-tab-pane label="手动填写" name="second">
"$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;
},
},
};
//第一个标签页的值
firstBind(val) {
this.taskJournalProcessfirst = val;
if(this.activeName == "first"){
this.$emit("todo", this.taskJournalProcessfirst)
}
},
//获取第二个标签页的值
secondBind(val) {
this.taskJournalProcesssecond = val;
if(this.activeName == "second"){
this.$emit("todo", this.taskJournalProcesssecond);
}
},
是不是把tabPanel下的组件改成如此,使用.sync绑定变量,然后页面定义个taskJournalProcessfirst变量
<equList v-bind="$attrs" v-on="$listeners" :data.sync="taskJournalProcessfirst" />
然后子组件内部taskJournalProcessfirst
数据有更新的时候就this.$emit('update:data', 新数据)
这样在这个总的页面始终都能拿到最新的数据,然后直接判断当前要哪个就行,同理另一个equListManual组件也是这样处理。因为我看你原先的方案核心在切换的时候再去解决数据的问题,其实可以从一开始就维护好,始终确保在当前页面是最新的值,你就可以配置watch activeName直接操作了