[sync修饰符是对父子通信的简化]
之前子组件修改父组件的传值很麻烦，需要用emit重新定义方法将值返回
子组件中还是要通过emit传值this.$emit("update:stateEnv", false)，在父组件中通过传递的属性名.sync的方式接收数据，并且不用再写方法，用来实现数据的双向绑定，updater是规定写法，stateEnv是啊自定义的属性名
<template>
<view>
<view class="">弹出框样式</view>
<view class="box" :style="{height:stateEnv?'300rpx':'0'}"></view>
<button size="mini" @click="onClose">关闭</button>
</view>
</template>
<script>
export default {
name:"mypop",
data() {
return {
stateEnv: false
};
},
props:{
stateEnv:{
type: Boolean,
default: false
}
},
methods:{
onClose(){
// 这样直接改变父组件的值会报错
// this.state = false
this.$emit("update:stateEnv", false)
}
}
}
</script>
<style lang="scss">
.box {
width: 300rpx;
height: 300rpx;
background: hotpink;
}
</style>
[在父组件中接收数据]
不需要再在下面定义方法来携带要传的值了，直接用自定义的属性名.sync即可接收到数据
<template>
<view>
<!-- <pubTitle :title = "我们" subtitle="about page"></pubTitle> -->
<view class="">about页面</view>
<navigator url="../index/index" open-type="redirect">回到首页</navigator>
<navigator url="../list/list" open-type="redirect">回到列表页</navigator>
<myevent title="组件间传值" @myenv = "onmyenv"></myevent>
<button @click="clickBtn">开启{{mystate}}</button>
<!-- <mypop :state="mystate" @stateEnv="onStateEnv"></mypop> -->
<mypop :stateEnv.sync="mystate"></mypop>
</view>
</template>
<script>
export default {
data() {
return {
mystate: false
};
},
methods:{
onmyenv(e){
console.log(e);
},
clickBtn(){
this.mystate = true
},
// 使用sync就不用再写一个方法来接收值了
// onStateEnv(e){
// console.log(e);
// this.mystate = e
// }
}
}
</script>
<style lang="scss">
</style>
