对于VUE的初学者来讲,肯定会感觉prop的写法很麻烦,很讨厌!你肯定想如果prop也可以实现双向绑定那怎是一个爽字了得!不过现实是残酷的,如果子组件可以任意修改父组件的内容,那势必会带来数据的混乱,从而造成维护的困扰!毕竟父组件也是有尊严的!
官方推荐使用一种update:my-prop-name 的模式来替代事件触发,目的是为了优雅而不粗鲁的实现父子组件间的双向绑定!先来完成一个小功能:通过父组件按钮将子组件显示出来,如图:
父组件代码:
<input type=“button”
value=“我是父组件中的按钮”
@click=“show”>
子组件child代码:
我是一个子组件,我在红色的海洋里!
接下来加个需求,在子组当中增加一个按钮,通过该按钮来将自已隐藏起来!需要借助父子之间的传值了!如图:
父组件代码:
子组件代码:
我是一个子组件,我在红色的海洋里!
那么如果现在我将父组件的changeIsShow直接写成匿名函数,也能运行吧:
<child @update:isShow=“function(bol){isShow=bol}” v-show=“isShow”/>
1
再次运行,一切还是那么美好,真好!
现在我将那匿名函数改成箭头函数,不过分吧:
<child @update:isShow=“bol=>isShow=bol” v-show=“isShow”/>
1
再运行一次,完美,真好!
最后我将上面那行代码做最后一次修改:
我是一个子组件,我在红色的海洋里!