Vue——05-02组件的数据、为什么data要使用函数、父组件给子组件传递数据的三种写法、父传子以及传两种以上的值、默认值以及父传子的引用类型

Southern Wind

已于 2022-04-23 16:32:42 修改

阅读量605

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

于 2021-10-25 16:18:10 首次发布

本文链接：https://blog.csdn.net/nanchen_J/article/details/120950635

版权

Vue 专栏收录该内容

44 篇文章 11 订阅

订阅专栏

本文详细介绍了Vue.js中组件内的数据管理，包括为何data必须为函数以确保组件实例间数据独立，以及如何通过props从父组件向子组件传递数据，包括数组、对象和函数类型的值。此外，还展示了如何设置props的默认值和类型验证，以及传递多个props的方法。

摘要由CSDN通过智能技术生成

在组件中获取数据

看下面这个例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>组件数据的获取</title>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	</head>
	<body>
		<div id="app">
			<cpn1></cpn1>
		</div>
		<script type="text/javascript">
			const vm = new Vue({
				el: '#app',
				components: {
					cpn1: {
						template: `<div>{{msg}}</div>`,
						data() {
							return {
								msg: 'Nanchen'
							}
						},
					}
				}
			})
		</script>
	</body>
</html>

打印结果：

在局部组件中添加cpn1标签并且在添加data组件

二、组件中的data为什么必须要是函数？

这里看个例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>data必须是函数</title>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
		<style type="text/css">
			h2{
				display: inline-block;
			}
			button{
				width: 35px;
				height: 35px;
				line-height: 35px;
			}
		</style>
	</head>
	
	<body>
		<div id="app">
			<h2>data不使用函数时：</h2>
			<cpn1></cpn1>
			<cpn1></cpn1>
			<hr>
			<h2>data使用函数时：</h2>
			<cpn2></cpn2>
			<cpn2></cpn2>
			<hr>
		</div>
		<template id="cpn1">
			<div>
				<button @click="message--">-</button>
				<h2>{{message}}</h2>
				<button @click="message++">+</button>
			</div>
		</template>
		<template id="cpn2">
			<div>
				<button @click="message--">-</button>
				<h2>{{message}}</h2>
				<button @click="message++">+</button>
			</div>
		</template>
		<script type="text/javascript">
			const obj = {
				message: 0
			};
			const vm = new Vue({
				el: '#app',
				components: {
					cpn1: {
						template: '#cpn1',
						data() {
							return obj
						}
					},
					cpn2: {
						template: '#cpn2',
						data() {
							return {
								message: 0
							}
						}
					}
				}
			})
		</script>
	</body>
</html>

实现效果：

可以看到，如果这个例子的return直接返回这个obj，那么上下的＋－会同时进行

如果在data中使用函数时，它不会进行联动。显而易见，第二种使用函数的这个具有独立性，用起来更方便

简单的来说：如果 data 直接是一个对象的话，那么一旦修改其中一个组件的数据，其他组件相同数据就会被改变，而 data 是函数的话，每个 vue 组件的 data 都因为函数有了自己的作用域，互不干扰。

也可以这样理解：data没使用函数时把数据放在了栈内存中，data使用函数时把数据放在堆内存里

父组件给子组件传递数据——props属性

使用props属性，父组件向子组件传递数据

props数组写法：

props: ['cmovies', 'cmessage']

对象写法：

props: {
cmessage: {
type: String, // 类型限制
default: 'zzzzz', // 默认值
required: true //在使用组件必传值
}
}

如果其中的类型是Object或者为Array类型，其默认值必须是一个函数

第一种写法：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>父组件给子组件传递数据</title>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	</head>
	<body>
		<div id="app">
			<cpn1 :msg="message"></cpn1>
		</div>
		<template id="cpn1">
			<div>I·am {{aaa}}</div>
		</template>
		<script type="text/javascript">
			const vm = new Vue({
				el:'#app',
				data(){
					return{
						message:'NanChen'
					}
				},
				components:{
					cpn1:{
						template:'#cpn1',
						data(){
							return{
								aaa:this.msg
							}
						},
						props:['msg']    //数组写法
					}
				}
			})
		</script>
	</body>
</html>

效果如下：

第二种写法：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第二种写法</title>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	</head>
	<body>
		<div id="app">
			<cpn1 :msg="message"></cpn1>
		</div>
		<script type="text/javascript">
			Vue.component('cpn1', {
				template: `<div>My name is{{msg}}</div>`,
				props: {
					msg: {
						type: String
					}
				}
			})
			const vm = new Vue({
				el: '#app',
				data() {
					return {
						message: ' NanChen'
					}
				},
			})
		</script>
	</body>
</html>

效果如下：

第三种写法：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第三种方法</title>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	</head>
	<body>
		<div id="app">
			<cpn1 :msg="message"></cpn1>
		</div>
		<script type="text/javascript">
			const vm = new Vue({
				el: '#app',
				data() {
					return {
						message: ' NanChen'
					}
				},
				components: {
					cpn1: {
						template: `<div>My name is{{msg}}</div>`,
						props: {
							msg: {
								type: String
							}
						}
					}
				}
			})
		</script>
	</body>
</html>

效果如下：

当然方法还有很多，这里就不一一举例了。

下面演示一下如果父组件传两个及以上的写法：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	</head>
	<body>
		<div id="app">
			<cpn1 :msg="message" :one="first"></cpn1>
		</div>
		<script type="text/javascript">
			const vm = new Vue({
				el:'#app',
				data(){
					return{
						message:'Welcome to',
						first:" Nanchen's blog"
					}
				},
				components:{
					cpn1:{
						template:
						`<div>Hello everyone,{{msg}}——{{one}}</div>`,
						props:{
							msg:{
								type:String
							},
							one:{
								type:String
							}
						}
					},
				}
			})
		</script>
	</body>
</html>

效果如下：

传默认值：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	</head>
	<body>
		<div id="app">
			<cpn1 :msg="message" ></cpn1>	<!--:num="nums"-->
		</div>
		<script type="text/javascript">
			const vm = new Vue({
				el:'#app',
				data(){
					return{
						message:"My name is NanChen",
						// nums:"I'm 50 years old"
					}
				},
				methods:{
					
				},
				components:{
					cpn1:{
						template:
						`<div>{{msg}}--{{num}}</div>`,
						props:{
							msg:{
								type:String
							},
							num:{
								type:String,
								default:'欢迎来到Nanchen的博客',    // 如果上方没有nums值就会显示默认值里的文字
								required:true	//可以使用required选项来声明这个参数是否必须传入。
							}
						}
					}
				}
			})
		</script>
	</body>
</html>

required：声明这个参数是否必须传入。

父组件传子组件数据——引用类型的两种写法

第一种：数组与对象的写法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	</head>
	<body>
		<div id="app">
			<cpn1 :msg="message1"></cpn1>
			<cpn2 :msgs="message2"></cpn2>
		</div>
		<script type="text/javascript">
			const vm = new Vue({
				el:'#app',
				data(){
					return{
						message1:['Nan','Chen'],
						message2:{
							name:'NanChen',
							age:39,
							sex:'unknown',
						},
				}
				},
				components:{
					cpn1:{
						template:
						`<div>这是一个数组，其包含：{{msg}}</div>`,
						props:{
							msg:{
								type:Array,
							},
						}
					},
					cpn2:{
						template:
						`<div>My name is {{msgs.name}} I'm {{msgs.age}} years old</div>`,
						props:{
							msgs:{
								type:Object
							}
						}
					}
				},
			})
		</script>
	</body>
</html>

效果如下图：

第二种Function类型：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>父传子引用类型</title>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	</head>
	<body>
		<div id="app">
			<cpn1 :msg="add"></cpn1>
			<h2>{{count}}</h2>
		</div>
		<script type="text/javascript">
			const vm = new Vue({
				el:'#app',
				data:{
					count:0
				},
				methods:{
					add:function(){
						return this.count++;
					}
				},
				components:{
					cpn1:{
						template:
						`<div>
							<button @click="sum">+</button>
						</div>`,
						props:{
							msg:{
								type:Function	// 引用类型
							},
						},
						methods:{
							sum(){
								this.msg()
							}
						}
					}
				}
			})
		</script>
	</body>
</html>

效果：