我们在使用vue开发过程中会遇到这样的情况,在父组件中引入了子组件,需要将父组件的值传到子组件中显示,同时子组件还可以更改父组件的值。
以我目前的一个项目的开发为例,如下图页面:
在父组件中,我引入了两个子组件,一个是左边的导航栏,还有中间的一个富文本编译器组件,当我点击左边导航栏时,中间的页面会切换,也就是改变引入的子组件。
怎么实现呢,首先,设置在该页面index.vue中设置一个变量index,左边导航栏每一项也对应一个index值,导航菜单绑定select函数,@select="handleSelect",@是v-on的简写。
handleSelect函数接收到参数,然后发射出去,再由父组件接收就可以了。
handleSelect(key, keyPath) {
console.log(key, keyPath);
this.changeIndex(keyPath[1])
},
changeIndex:function(key) {
this.$emit("IndexChanged",key)
}
this.$emit("IndexChanged",key)就是将key的值传到一个叫IndexChange