当前位置：网站首页>组件的传参

组件的传参

2022-07-27 20:03:00 【huijie_0716】

组件的定义与使用

组件的传参

父App.vue 传给子CounterCom.vue

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

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

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

实现点击加1功能

子组件数据传递给父组件

使用的事件 $emit

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

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

$emit(事件名,事件值) 发送一次事件,事件名(counterchange)和事件值(counter) 是自定义的
$event 固定写法,事件的值(counterchange 事件的值,也是子组件$emit的第二个参数)

组件设计(购物车加减个数)

props
   默认值:value
   最大值:max
   最小值:min
   步进制:step(一次加多多少)
data
   被改变的值:num 加add
methods
   加add
   减minus
事件
   numchange 数字发送变化
template
   <button>-</button>
    <input/>
    <button>+</button>

组件设计(幻灯片)

<template>
	<div class="swiper" @mousemove="overHd" @mouseout="auto">
		<!-- item 从1开始 -->
		<div class="swiper-item" v-for="(item,ind) in gallery" :key="item" v-show="ind===index">
			<img :src="item" alt="" width="100%">
		</div>
		
		<!-- 指示小点 -->
		<div class="thumbs">
			<!-- 当index值等于item的值添加.active 类 -->
			<!-- 单击改变index的值，切换的轮播图 -->
			<span class="thumb" @click="index=item-1" :class="{'active':item===index+1}" v-for="item in gallery.length" :key="item">{
   {item}}</span>
		</div>
	</div>
</template>

<script>
	// item 1,2,3,4
	// index0
	export default{
		props:{
			// 引用类型的默认值必须是函数返回数据
			gallery:{
				type:Array,
				default(){return []}
			}
		},
		data(){
			return {
				// 默认显示
				index:0,
				stopID:null,//停止id
			}
		},
		// 当组件创建完毕,执行自动播放
		created() {
			this.auto();
		},
		methods:{
			// 自动播放
			auto(){
				this.stopID=setInterval(()=>{
					// 每隔2500毫秒让index值加1
					// 检查index的边界
					this.index++;
					this.check()
				},2500)
			},
			// 鼠标移入停止
			overHd(){
				clearInterval(this.stopID);
			},
			// 检查边界
			check(){
				// 如果index等于gallery长度 让index值为0
				if(this.index>=this.gallery.length){
					this.index=0
				}
			}
		}
	}
</script>

<style scoped="scoped">
	.swiper{
		position: relative;
	}
	.thumbs{
		position: absolute;
		bottom: 10px;
		text-align: center;
		width: 100%;
	}
	.thumb{
		height: 15px;
		width: 15px;
		display: inline-block;
		border-radius: 15px;
		margin: 0 5px;
		background-color: #fff;
		/* 隐藏文本(首行缩进) */
		text-indent: 999em;
	}
	.thumb:hover{
		cursor: pointer;
		background-color: #f70;
	}
	.active{
		background-color: #f70;
	}
</style>

<template>
	<div>
		<h1>swiper幻灯片组件</h1>
		<SwiperCom style="width: 800px;" :gallery="gallery"></SwiperCom>
	</div>
</template>

<script>
	// 01导入组件
	import SwiperCom from './components/SwiperCom.vue'
	export default {
		components: {
			SwiperCom
		},
		data() {
			return {
				gallery: [
					"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/290270b6fc499fc5fcb653417e99fe91.jpg?w=632&h=340",
					"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5d1892854c8bb165e755d68bde287d71.jpg?w=632&h=340",
					"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/28c13d0d11b38ec17fa5d83bc6ba5912.jpg?w=632&h=340"
				]

			}
		}
	}
</script>

<style>
</style>

组件设计(跑马灯)

//vue.app
<template>
	<div>
		<h1>文字滚动</h1>
		<!-- 使用组件 -->
		<MarQuee :inter='100' str="vue 学好,月薪过万,很容易!"></MarQuee>
		<MarQuee :inter='200' str="我喜欢jsdjn!"></MarQuee>
	</div>
</template>

<script>
	// 导入组件
	import MarQuee from './components/MarQuee.vue'
	export default{
		// 注册组件
		components:{
			MarQuee
		}
	}
</script>

<style>
</style>


//MarQuee.vue
<template>
	<div>
		{
   {msg}}
	</div>
</template>

<script>
	export default {
		props:{
			inter:{type:Number,default:50},//滚动的速度
			str:{type:String,default:''},//滚动的初始文本
		},
		data(){
			return{
				msg:this.str //显示文本
			}
		},
		created() {
			// 组件创建完毕,调用自动播放
			this.auto();
		},
		methods:{
			auto(){
				setInterval(()=>{
					// 把msg的文本第一个字符放到最后一个
					// slice(1)从第一截取到最后
					// slice(0,1)截取第0个字符
					this.msg=this.msg.slice(1)+this.msg.slice(0,1)
				},this.inter)
			}
		}
	}
</script>

<style>
</style>