[native：将原生事件绑定到组件]
在自定义组件的标签里写原生自带的方法如onclick等是不支持的，因为他会认为这是自己写的方法，想要在自定义的组件上写原生方法，就用自定义方法名.native即可
<myevent title="组件间传值" @myenv = "onmyenv" @click.native="onClick"></myevent>
新建一个组件mypop，写一个弹出框，点关闭按钮后关闭
在父组件定义一个属性值state=false，且通过标签向子组件传递了这个初始值，然后在子组件中接收
<template>
<view>
<pubTitle :title = "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>开启</button>
<mypop :state="state"></mypop>
</view>
</template>
<script>
export default {
data() {
return {
state: false
};
},
methods:{
onmyenv(e){
console.log(e);
}
}
}
</script>
<style lang="scss">
</style>
子组件接收父组件的传值
<template>
<view>
<view class="">弹出框样式</view>
<view class="box" :style=""></view>
<button size="mini">关闭</button>
</view>
</template>
<script>
export default {
name:"mypop",
data() {
return {
state: false
};
},
props:{
state:{
type: Boolean,
default: false
}
}
}
</script>
<style lang="scss">
.box {
width: 300rpx;
height: 300rpx;
background: hotpink;
}
</style>
[给开启和关闭按钮写点击事件]
在父组件中给开启按钮写点击事件，在子组件中给关闭按钮写点击事件
about.vue
<template>
<view>
<pubTitle :title = "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">开启</button>
<mypop :state="state"></mypop>
</view>
</template>
<script>
export default {
data() {
return {
state: false
};
},
methods:{
onmyenv(e){
console.log(e);
},
clickBtn(){
this.state = true
}
}
}
</script>
<style lang="scss">
</style>
子组件mypop.vue
<template>
<view>
<view class="">弹出框样式</view>
<view class="box" :style="{height:state?'300rpx':'0'}"></view>
<button size="mini" @click="onClose">关闭</button>
</view>
</template>
<script>
export default {
name:"mypop",
data() {
return {
state: false
};
},
props:{
state:{
type: Boolean,
default: false
}
},
methods:{
onClose(){
this.state = false
}
}
}
</script>
<style lang="scss">
.box {
width: 300rpx;
height: 300rpx;
background: hotpink;
}
</style>
实现效果：点击开启，盒子展开，点击关闭，盒子隐藏
这里会报错啊，不允许改变父组件传过来的值，vue是响应式的，改了可能会数据不同步，这就是vue的单向数据流
所以通过子向父传值的方式用$emit自定义方法传一个false到父组件去
mypop.vue
<template>
<view>
<view class="">弹出框样式</view>
<view class="box" :style="{height:state?'300rpx':'0'}"></view>
<button size="mini" @click="onClose">关闭</button>
</view>
</template>
<script>
export default {
name:"mypop",
data() {
return {
state: false
};
},
props:{
state:{
type: Boolean,
default: false
}
},
methods:{
onClose(){
// 这样直接改变父组件的值会报错
// this.state = false
this.$emit("stateEnv", false)
}
}
}
</script>
<style lang="scss">
.box {
width: 300rpx;
height: 300rpx;
background: hotpink;
}
</style>
然后在父组件中接收，把接收到的的值重新赋值给state
<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">开启{{state}}</button>
<mypop :state="state" @stateEnv="onStateEnv"></mypop>
</view>
</template>
<script>
export default {
data() {
return {
state: false
};
},
methods:{
onmyenv(e){
console.log(e);
},
clickBtn(){
this.state = true
},
onStateEnv(e){
console.log(e);
this.state = e
}
}
}
</script>
<style lang="scss">
</style>
