vue父组件props修改子组件的v-model值报错

Question

如下图所示：
使用了mint-ui的tabbar,在父组件中通过props修改selected的值报错，请问各位大神父组件如何修改子组件中的v-model绑定的值呢？谢谢各位的回答

报错：

Answer 1

如果你想父组件改变model，自组件能实时接到，子组件去watch这个model。
如果你想子组件改变model，同步给父组件，那么你在改子组件model的时候，绑定this.$emit("model",model)
父组件@model="modelFunc",modelFunc类似于function，去接收就好了

Answer 2

你这是在mt-tabbar的外面又包了一层，上面截图是你自己封装的一个组件？ 然后，你定义props在调用这个组件的父组件里面动态修改selected? 如果是这样，你可以在父组件上使用selected.sync语法，你可以文档查下.sync和update:selected的使用.

另外，我觉得你本身用的是组件了，不需要再包一层，用props来声明吧，直接在那个页用data来声明不更好

Answer 3

@jadestrong 的思路是对的

你截图的所示的组件,已经是<mt-tabbar>的父组件了,为什么需要再封装一层让再上一级的爷爷组件来传递selected呢?如果的确需要这样的组件树结构的话,则应该在截图所示的组件中使用事件$emit告知爷爷组件更新selected值.然后父组件接收的props值也会自动更新的.

但从我看你问题描述中,感觉像是对组件间数据传递有点误解.就你这个用例来看

<template>
  <mt-tabbar v-model="selected">...<mt-tabbar>
</template>
<script>
export default {
  data () {
    return {
      selected: '1'
    }
  }
}
</script>

selected是父组件专递给子组件(<mt-tabbar>)的,所以selected在父组件中应该是组件内状态(对应vue就是data hook中的数据).

而<mt-tabbar>的v-model应该本来就实现了组件间数据传递的双向绑定(不确定,我没有用过),而你上面会报错,是因为<mt-tabber>切换的时候并不是想改变父组件的data,而是想改变爷爷组件的data,所以才会出错,如果你要改变爷爷组件的data,应该在父组件中再加一层$emit或是其他像sync一类的语法糖.