vue组件传参

最新推荐文章于 2025-03-14 10:34:59 发布

时光流逝·

最新推荐文章于 2025-03-14 10:34:59 发布

阅读量4.8k

点赞数 1

文章标签：前端

本文链接：https://blog.youkuaiyun.com/fagdg/article/details/126022089

版权

本文介绍了Vue组件的基本概念，包括定义与使用，重点讨论了数据如何在组件间传递，如父传子使用props，子传父通过$emit事件。同时，文章详细讲解了组件设计的实例，涉及props的配置、data的定义以及methods中相关操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、vue组件

1、定义与使用

//CounterCom.vue
<template>
    <button></button>
</template>

//App.vue
//01导入组件
import CounterCom from './components/CounterCom.vue'
//02注册组件
components:{CounterCom}
//03使用组件
<CounterCom></CounterCom>
<counter-com></counter-com>

2、父传子

使用props，父传给子的数据是只读的(做默认值，读取显示)不能修改

//App.vue中
<CounterCom :num="10">

//CounterCom.vue组件中
// 01.props接收父组件中的参数并定义默认值
props:{"num":{type:Number,default:1},
//02 使用参数num
data(){
  return{counter:this.num}
}

3、子传父

使用的事件$emit

$emit(事件名,事件值)发送一次事件，事件名{counterchange}和事件值{counter}是自定义的

$event固定写法，事件的值{counterchange 事件的值，也是子组件$emit的第二个参数}

//App.vue
<CounterCom @counterchange="m=$event"></CounterCom>

//CounterCom.vue
<button @click="counter++;$emit('counterchange',counter)">
        {{counter}}
</button>

二、数据传参

1、父传子

2、子传父

三、组件的设计

1、组件的设计

props： 默认值：value，最大值：max，最小值：min，步进值：step(一次加多少)

data： 被改变的值：num

methods： 加：add，减：minus

事件：numchange(数字发生变化)

<template>
	<span>
		<button @click="minus" :disabled="num<=min">-</button>
		<input type="text" v-model.number="num">
		<button @click="add" :disabled="num>=max">+</button>
	</span>
</template>

<script>
	export default{
		props:{
			// 定义props.value 默认值
			value:{type:Number,default:1},
			max:{type:Number,default:10},
			min:{type:Number,default:1},
			step:{type:Number,default:1}
		},
		data(){
			return{
				// 使用props的value值
				num:this.value
			}
		},
		methods:{
			// 实现添加方法
			add(){
				this.num+=this.step;
				// 当数据变化时,发送一个numchange
				this.$emit("numchange",this.num);
			},
			// 实现减1方法
			minus(){
				this.num--;
				this.$emit("numchange",this.num);
			},
		}
	}
</script>

2、组件的设计SwiperCom

props：gallery 传入图片的数组，inter 间隔时间， current 当前第几张幻灯片

data： index 当前显示第几张

methods： auto 自动播放，check 检查边界

事件

<template>
    <div class="swiper">
        <div class="swiperitem">幻灯片<img></div>
        <div class="controls">上一张，下一张</div>
        <div class="thumbs">小圆点</div>
    </div>
</template>