vue生命周期以及各个作用总结

嘿，朋友 人间不值的哟

export default {
		name: 'Index',
					//1：递归组件运用（指组件自身组件调用自身组件）
					//vue-tools插件调试是页面是以name命名的，更有语义信息的组件树
		props: [],
		//props是子组件用来接收父组件传的参数
		//应用
		//父组件使用子组件<child v-bind::list="list[0]" v-bind::fs="fs" 
		//			 v-on:@childvalChange="childvalChange"></child>
		//子组件接收数据props: [‘list’,'fs'] 
		//<-- 子组件调用父组件方法 -->
		//子组件向父组件传参this.$emit('childvalChange', this.value)  
		//父组件接收子组件传参childvalChange方法
		//<-- 父组件调用子组件方法 -->
		//父组件调用 this.$refs.child.getValue(this.value1);
		//子组件接收  getValue(val)
		//	childvalChange(val){//接收子组件调用父子间传的参数
		//在页面内定义组件方法
		//使用 <child my-message="hello!"></child>
		 //Vue.component('child', {
       // props: ['myMessage'],
       // template: '<span>{{ myMessage }}</span>'
   		// })

		data() {
			return {
			}
		},
		//data是用来存放页面数据
		//用来JavaScript 的完全编程能力
		//一般应用于组件中没有用到template标签，只有JavaScript 中 和在页面中创建的组件
		render: function (createElement) {
		    return createElement(
		      'h' + this.level,   // 标签名称
		      this.$slots.default // 子节点数组
		    )
	    },
	    //return里面就是要返回的东西
		components{child,echarts},//组件注册
		computed: {//计算属性
			totalMarks:function(){
				let total = 0
				let that = this
				for(let i in that.list){
					total+=parseInt(that.list[i].marks)
				}
				return total
			}
		},
		beforeCreate() {
		console.log("创建前：");
		},
		created() {
		 console.log("创建完成：");
		 },
		beforeMount(){
		console.log("挂载前：");
		},
		mounted() {
		console.log("挂载完成：");
		},
		beforeUpdate(){
		console.log('=即将更新渲染=');
		},
		updated(){
		console.log('==更新成功==');
		},
		methods: {//方法
			childvalChange(val){//接收子组件调用父子间传的参数
			console.log(val)
			},
			 // 向父组件参数
	        childvalChange(){
	            this.$emit('childvalChange', this.value)
	        },
	        // 调用子组件方法并参数
	        sendValue(){
	            this.$refs.child.getValue(this.value1);
	        },
	        getValue(val){
			console.log(val)
			}
		},
		watch: {},//监听属性
		//应用
		//<--页面-->
		//	<el-input v-model="demo"></el-input>
	   //		 {{value}}
	   //  <--data-->
	   //    demo: '',
	   //     value: ''
	  // 	<--watch中的方法   触发时机：当demo值改变时-->
	  //	   	demo(val) {
	   //     this.value = this.demo;
	   //      }
		beforeDestroy() {
			console.log("销毁前：");
		},
		destoryed(){
		 	console.log("销毁完成：")
		 }
	}

页面一般使用属性

<template>
	<div class="index-container">
		Hello 朋友
	</div>
</template>

<script>
	export default {
		name: 'Index',
		props: [],    //接参
		data() {
			return {
			}
		},
		components:{ //组件
		},
		computed: {},//计算属性
		created() {//创建
		},
		mounted() {//挂载
		},
		methods: {//方法
		},
		watch: {//监听属性
		},
		destoryed(){//销毁属性
		}
	}
</script>

<style lang="scss" scoped>

</style>

插槽 的使用

//父组件  一般组件标签内不能写数据 写了也不会显示 插槽就可以接收里面的数据
	<navigation-link url="/profile">
	  admin
	</navigation-link>
	
//子组件
<a v-bind:href="url"class="nav-link">
 Hello  <slot></slot>
</a>
//渲染出来 
Hello  admin
//解释 slot接收了父组件内写的值

//插槽 后备内容
//父组件
<submit-button></submit-button>
//子组件
<button type="submit">
  <slot>Submit</slot>
</button>
//渲染
Submit
//子组件不变 换父组件
<submit-button>
  Save
</submit-button>
//渲染
Save
//解释 当父组件内没有写值时，子组件内submit会显示 当写值后 只会显示父组件写的值