我的GitHub主页

重要知识点：每节博客都会重复🙉🙉🙉

口诀🤨：四基两空一对象，还有五个falsy值。

七种数据类型

• number string bool symbol
• null undefined
• object

五个 falsy 值

• null undefined
• 0 NaN
• '' (空字符串)

props与$parent的区别

共同处💪💪💪：

都能够接收来自父组件数据。

不同处💪💪💪：

1. props仅仅只能接收，单项绑定。着重数据传递。向子组件传递数据。
2. $parent既可以接受父组件数据 ，又可以修改父组件数据,是双向的 。
3. $parent还可以调用父组件的方法。

举例❤️

场景1.

子模版里需要渲染显示父组件数据

组件作用域是独立的，子组件与父组件不能直接互访数据。此时 props 可以将父组件数据下发给子组件。

<div id="app">
	<cpn :cname="name"></cpn>	
</div>
<template id="tem">
	<div>
		<p>我是子组件</p>
		{{cname}}
	</div>
</template>
<script src="../js/vue.js"></script>
<script>
	let app = new Vue({
		el:'#app',
		data:{
			name:'xixixi'
		},		
		components:{
			cpn:{
				template:'#tem',
				props:{
					cname:{
						type:String
					}
				}
			}
		}
	});
</script>

场景2：

子组件发生某个事件，在事件执行的方法中，需要访问或者更改父组件数据属性或调用父组件方法，此时用$parent. 不常使用。

	<div id="app">
		<cpn></cpn>	
	</div>
	<template id="tem">
		<div>
			<p>我是子组件</p>
			<button @click="btnclick">按钮</button>
		</div>
	</template>
	<script src="../js/vue.js"></script>
	<script>
		let app = new Vue({
			el:'#app',
			data:{
				name:'xixixi'
			},		
			methods:{
				parentPrint(){
					console.log("父组件方法");
				}
			},
			components:{
				cpn:{
					template:'#tem',
					methods:{
						btnclick(){
							//获取父组件name值
							console.log(this.$parent.name);
							//修改父组件name值
							this.$parent.name ="ssss";
							this.$parent.parentPrint();
						}
					}
				}
			}
		});
	</script>

由于本人水平有限，如有描述不准确的地方请给我留言，欢迎交流~