子组件向父组件传值两种方式:1.不含参数 2.含参数
前期工作:
在父组件的vue页面中引入子组件
template中:
<ColorManager v-show="showColor" />
script模块中:
import ColorManager from './ColorManager.vue'
export default {
components: {
ColorManager
},
}
script模块methods方法中对beforeShowColor的定义:
beforeShowColor() {
this.showColor = !this.showColor
}
1.不含参数
在子组件vue文件ColorManage.vue中需要传值的相应位置创建点击事件,直接在div中写,可不写方法,语法格式固定为:$emit('showColor')
<img src="~@/assets/home/left.png" class="left" @click="$emit('showColor')" />
在父组件vue文件中接收,即@showColor="beforeShowColor"
<ColorManager v-show="!showColor" @showColor="beforeShowColor" />
//此处@后面的为父组件中的方法
2.含参数
在子组件vue文件ColorManage.vue中需要传值的相应位置创建点击事件
<img src="~@/assets/home/left.png" class="left" @click="change()" />
change() {
this.$emit('showColor','参数1','参数2')
}
在父组件vue文件中接收,即@showColor="beforeShowColor"
<ColorManager v-show="!showColor" @showColor="beforeShowColor" />