标签:pre 直接 child cli 匿名函数 date 来替 gif 调整
官方推荐使用一种 update:my-prop-name 的模式来替代事件触发,目的是为了优雅而不粗鲁的实现父子组件间的双向绑定!先来完成一个小功能:通过父组件按钮将子组件显示出来,如图:
父组件代码:
<template>
<div>
<input type="button"
value="我是父组件中的按钮"
@click="show">
<child v-show="isShow"/>
</div>
</template>
<script>
import child from "@/components/child"
export default {
data() {
return {
isShow:false
}
},
components:{
child
},
methods:{
show(){
this.isShow=true;
}
}
}
</script>
子组件child代码:
<template>
<div>
我是一个子组件,我在红色的海洋里!
</div>
</template>
父组件代码:
<template>
<div>
<input type="button"
value="我是父组件中的按钮"
@click="show">
<child @upIsShow="changeIsShow" v-show="isShow"/>
</div>
</template>
<script>
import child from "@/components/child"
export default {
data() {
return {
isShow:false
}
},
components:{
child
},
methods:{
show(){
this.isShow=true;
},
changeIsShow(bol){
this.isShow=bol;
}
}
}
</script>
子组件代码:
<template>
<div>
我是一个子组件,我在红色的海洋里!
<input type="button" value="点我隐身" @click="upIsShow">
</div>
</template>
<script>
export default {
methods:{
upIsShow(){
this.$emit("upIsShow",false);
}
}
}
</script>
<child @update:isShow="changeIsShow" v-show="isShow"/>
upIsShow(){
this.$emit("update:isShow",false);
}
运行一下,一切正常!真好!
<child @update:isShow="function(bol){isShow=bol}" v-show="isShow"/>
再次运行,一切还是那么美好,真好!
<child @update:isShow="bol=>isShow=bol" v-show="isShow"/>
再运行一次,完美,真好!
<child :isShow.sync="isShow" v-show="isShow"/>
<template>
<div>
<input type="button"
value="我是父组件中的按钮"
@click="show">
<child :isShow.sync="isShow" v-show="isShow"/>
</div>
</template>
<script>
import child from "@/components/child"
export default {
data() {
return {
isShow:false
}
},
components:{
child
},
methods:{
show(){
this.isShow=true;
},
changeIsShow(bol){
this.isShow=bol;
}
}
}
</script>
子组件:
<template>
<div>
我是一个子组件,我在红色的海洋里!
<input type="button" value="点我隐身" @click="upIsShow">
</div>
</template>
<script>
export default {
methods:{
upIsShow(){
this.$emit("update:isShow",false);
}
}
}
</script>
最后:sync只是给大家伙提供了一种与父组件沟通的思路而已!所以在后面日子里,你如果只是单纯的在子组件当中修改父组件的某个数据时,建议使用sync,简单,快捷,有档次!真好!
标签:pre 直接 child cli 匿名函数 date 来替 gif 调整
原文地址:https://www.cnblogs.com/smile-fanyin/p/14862816.html