Vue知识汇集 -- 自用(欢迎指错,随时补充)

1、vue中的data为什么是一个函数而不是一个对象?

防止数据污染。 函数在每次使用的时候都会创建并返回一个新的实例,从而实现数据的独立。如果使用对象的话,会造成数据的共用从引发系列问题。

2、vue的生命周期钩子

  • beforeCreated
  • created
  • beforeMount
  • mounted
  • beforeUpdated
  • updated
  • beforeDestroy
  • destory
  • activated
  • deactivated
  • beforeUnmount
  • unmounted
  • errorCaptured
  • renderTracked
  • renderTriggered

3、组件通信

1、$ref: 父组件访问子组件

<compt ref="comp1" />
this.$refs.comp1 
// vue3中已经废除了使用this.$children 而建议使用 this.$ref

2、$parent: 子组件访问父组件

this.$parent

3、props: 父组件传递数据给子组件

父:
<compt :arr="[1,2,3]"  />
子:
...
props:{
	arr:{
		type:Array,
		default() {
			return []
		}
	}
}

4、$emit: 子组件传递数据给父组件

子:
<template>
	<div>
		<button @click="change">{{title}}</button>
	</div>
</template>
export default {
	data() {
		title:'children'
	},
	methods:{
		change() {
			this.$emit('changetitle', '子传父')
			// (方法名, 参数)
		}
	}
}
父:
<compt @changetitle="changetitle" />
...
methods:{
	changetitle(query) {
		console.log('query:', query )
	}
}
上一篇:Redis 5.0 版本发布


下一篇:网页设计DIV+CSS——第2 天:什么是名字空间