
在父组件中试用:msg.sync监听组件变化并接收值
<el-tabs :tab-position="tabPosition" v-model="paneName">
<el-tab-pane label="基本信息" name="1"><BasicInformation :msg.sync="paneName" /></el-tab-pane>
<el-tab-pane label="头像设置" name="2"><AvatarSettings /></el-tab-pane>
<el-tab-pane label="账号安全" name="3"><AccountSecurity /></el-tab-pane>
</el-tabs>
在子组件中的点击事件里,抛出事件
setting() {
this.$emit('update:msg','3');
}
如此便可实现点击切换tabs标签页了。
本文介绍了如何在Vue中通过msg.sync修饰符监听并接收子组件的变化,实现父组件与子组件间的双向数据绑定。在父组件的tabs元素中,利用v-model和msg.sync来监听和更新paneName的值。子组件中通过$emit('update:msg')触发事件,传递新的值,从而实现在点击事件中切换tabs标签页的功能。
986





