Parameter transmission of components

Definition and use of components

Parameter transfer of components

Father App.vue  Pass it on to Zi CounterCom.vue

The main use is props

CounterCom.vue In the component
1. Receive parameters and define default values
props:{
    "num":{type:Number,default:1}
}
2. Using parameter num
data(){
    return {counter:this.num}
}

App.vue In file
<CounterCom :num="10">

Use props
The array passed from parent to child is read-only ( Default value , Read display )
It can't be modified

  Click to add 1 function

  The sub component data is passed to the parent component

Events used $emit

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

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

$emit( Event name , Event value )   Send an event , Event name (counterchange) And event values (counter) Is custom

$event Fixed writing , Event value (counterchange Event value , It is also a sub component $emit Second parameter of )

Component design ( Add or subtract the number of shopping carts )

 props

1.      The default value is :value
2.      Maximum :max
3.      minimum value :min
4.      Step system :step( Add more at one time How many? )

data
     Changed value :num Add add
methods 
     Add add
     reduce minus
event
    numchange Digital transmission changes
template
    <button>-</button>
    <input/>
    <button>+</button>

Component design ( Slide )

<template>
	<div class="swiper" @mousemove="overHd" @mouseout="auto">
		<!-- item  from 1 Start  -->
		<div class="swiper-item" v-for="(item,ind) in gallery" :key="item" v-show="ind===index">
			<img :src="item" alt="" width="100%">
		</div>
		
		<!--  It's a little bit smaller  -->
		<div class="thumbs">
			<!--  When index The value is equal to item Add the value of .active  class  -->
			<!--  Click change index Value , Switched carousel  -->
			<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:{
			//  The default value of the reference type must be the function return data 
			gallery:{
				type:Array,
				default(){return []}
			}
		},
		data(){
			return {
				//  Default display 
				index:0,
				stopID:null,// stop it id
			}
		},
		//  When the component is created , Perform autoplay 
		created() {
			this.auto();
		},
		methods:{
			//  Auto play 
			auto(){
				this.stopID=setInterval(()=>{
					//  every other 2500 Millisecond let index It's worth adding 1
					//  Check index The boundary of the 
					this.index++;
					this.check()
				},2500)
			},
			//  Mouse in stop 
			overHd(){
				clearInterval(this.stopID);
			},
			//  Check the boundaries 
			check(){
				//  If index be equal to gallery length   Give Way index The value is 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;
		/*  Hide text ( The first line indentation ) */
		text-indent: 999em;
	}
	.thumb:hover{
		cursor: pointer;
		background-color: #f70;
	}
	.active{
		background-color: #f70;
	}
</style>

<template>
	<div>
		<h1>swiper Slide components </h1>
		<SwiperCom style="width: 800px;" :gallery="gallery"></SwiperCom>
	</div>
</template>

<script>
	// 01 Import components 
	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>

Component design ( Running lights )

//vue.app
<template>
	<div>
		<h1> Text scrolling </h1>
		<!--  Use components  -->
		<MarQuee :inter='100' str="vue  Learn from good examples , The monthly salary is over ten thousand , be prone to !"></MarQuee>
		<MarQuee :inter='200' str=" I like jsdjn!"></MarQuee>
	</div>
</template>

<script>
	//  Import components 
	import MarQuee from './components/MarQuee.vue'
	export default{
		//  Certified components 
		components:{
			MarQuee
		}
	}
</script>

<style>
</style>


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

<script>
	export default {
		props:{
			inter:{type:Number,default:50},// The speed of the roll 
			str:{type:String,default:''},// Scrolling initial text 
		},
		data(){
			return{
				msg:this.str // Show text 
			}
		},
		created() {
			//  Component created , Call autoplay 
			this.auto();
		},
		methods:{
			auto(){
				setInterval(()=>{
					//  hold msg Put the first character of the text in the last 
					// slice(1) From the first intercept to the last 
					// slice(0,1) Cut off the 0 Characters 
					this.msg=this.msg.slice(1)+this.msg.slice(0,1)
				},this.inter)
			}
		}
	}
</script>

<style>
</style>

Life cycle

Concept

Each component goes through a series of specific processes from creation to destruction , Called life cycle
The callback function executed by the process is called the life cycle function

effect

Initiate after creation ajax request
Operation after mounting dom
Add event listener
Remove interval calls before destruction , Event monitoring
explain ： Not every life cycle must use  

  Before and after creation

beforeCreate Before creation
     characteristic ： Yes this, No, data And methods

created After creation
     characteristic ： Yes data, No, $el,dom node
     use ： ajax request , Timer , Event monitoring

  Before and after mounting

beforeMount Before mounting
     characteristic ： Yes $el, The data is not rendered

mounted After mounting
     characteristic ： Yes dom node , Data is also rendered
     use ： Operation node ,ajax request

  Before and after the update

beforeUpdate Before updating
     characteristic ： Will execute many times   Data update ,dom Node not updated

updated Updated completely
     characteristic ： Will execute many times Data update ,dom Nodes are also updated

  Before and after destruction

beforeDestroy Before destruction
     characteristic ： Data can be updated , The view is no longer updated
     use ： Remove event monitoring , Stop timer

destroyed Destroyed
     characteristic ： No, this, Switch views with vue The connection of examples