子组件向父组件传值：含参数及不含参数使用emit的两种情况

子组件向父组件传值两种方式：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中需要传值的相应位置创建点击事件，直接在dvi中写，可不写方法，语法格式固定为：$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" />

标签：vue,beforeShowColor,向父,showColor,参数,组件,传值
来源： https://blog.csdn.net/weixin_43312391/article/details/122580194