VUE学习笔记：10.组件化之：组件中数据的传递

最新推荐文章于 2023-04-16 14:45:24 发布
最新推荐文章于 2023-04-16 14:45:24 发布
阅读量295 收藏 1
点赞数 2
分类专栏： vue学习笔记 文章标签： vue 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ouyicnm/article/details/117753536
版权

1.组件中的数据存放

在这里插入图片描述
在这里插入图片描述
案例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app1">
	<!--使用组件-->
	<mycpnc></mycpnc>
</div>

<!--使用template标签抽离组件模板-->
<template id="script_template">
	<div>
		<h3>{{message}}</h3>
	</div>
</template>

<!--引入本地的vue.js文件-->
<script src="../vue.js"></script>

<script>
    let app1 = new Vue({
        el: '#app1', // 讲这个vue实例与id为app1的标签关联起来
        data: {},
		//使用语法糖方式注册局部组件
		components: {
			'mycpnc':{
				template: '#script_template',
				data:function(){
					return {message: '我是组件中的数据'}
				}
			}
		}
    })	
</script>
</body>
</html>

运行效果如下：
在这里插入图片描述
总结：

  • 组件中无法使用vue实例中的数据。
  • 组件中使用data属性来存放组件自己的数据。
  • 组件中的data属性是一个函数，且必须返回一个对象，在对象中存放数据。

2.组件中的data属性为什么是函数？

vue讲组件中的data属性设置为一个函数，主要原因是为了防止引用多个组件实例时产生数据冲突。

3.父子组件之间的通信

在这里插入图片描述

（1）父组件传递数据给子组件-props

拓展：vue实例也可以看成一个组件，注册在vue实例中的组件就是其子组件。

在这里插入图片描述

（1.1）父组件传递数据给子组件的步骤：

子组件中

  1. 子组件中使用props声明变量用于接受父组件的数据。

    方式1：使用数组形式声明变量

    let app = new Vue({
    el: '#app1', // 讲这个vue实例与id为app1的标签关联起来
    data: {
		message: '哈哈哈',
		number: 10
	},
	//使用语法糖方式注册局部组件
	components: {
		'mycpnc':{
			template: '#script_template',
			//声明变量用于接受父组件的数据
			//使用props声明后cmessage和cnumber就相当于子组件中的属性变量
			//父组件使用时可以使用v-bind的方式将数据传递给cmessage和cnumber
			props:['cmessage','cnumber'] 
		}
	}
})

    方式2：使用对象的方式声明变量（常用）

    let app = new Vue({
    el: '#app1', // 讲这个vue实例与id为app1的标签关联起来
    data: {
		message: '哈哈哈',
		number: 10
	},
	//使用语法糖方式注册局部组件
	components: {
		'mycpnc':{
			template: '#script_template',
			
			
			//声明变量用于接受父组件的数据
			//使用props声明后cmessage和cnumber就相当于子组件中的属性变量
			//父组件使用时可以使用v-bind的方式将数据传递给cmessage和cnumber
			props:{
				cmessage:{
					type:String, //指定父组件需要传递数据的类型
					default:'嘿嘿嘿', //指定父组件需要传递数据的默认值
					required:true //指定父组件使用子组件时，必须传递该数据
				},
				cnumber:{
					type:Number,
					default:55,
					required:false
				}
			}
		}
	}
})

  2. 子组件的模板中使用数据

    <!--使用template标签抽离组件模板-->
<!--在子组件的模板中直接使用经过props声明的变量-->
<template id="script_template">
	<div>
		<h3>{{cmessage}}</h3>
		<h3>{{cnumber}}</h3>
	</div>
</template>

父组件中

  1. 父组件中使用子组件时，需要使用v-bind的方式将数据传递给子组件声明好的变量

    <div id="app1">
	<!--使用组件-->
	<mycpnc :cmessage="message"  :cnumber="number"></mycpnc>
</div>

（1.2）案例

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app1">
	<!--使用组件-->
	<mycpnc :cmessage="message"  :cnumber="number"></mycpnc>
</div>

<!--使用template标签抽离组件模板-->
<template id="script_template">
	<div>
		<h3>{{cmessage}}</h3>
		<h3>{{cnumber}}</h3>
	</div>
</template>

<!--引入本地的vue.js文件-->
<script src="../vue.js"></script>

<script>
    let app = new Vue({
        el: '#app1', // 讲这个vue实例与id为app1的标签关联起来
        data: {
			message: '哈哈哈',
			number: 10
		},
		//使用语法糖方式注册局部组件
		components: {
			'mycpnc':{
				template: '#script_template',
				
				
				//声明变量用于接受父组件的数据
				//使用props声明后cmessage和cnumber就相当于子组件中的属性变量
				//父组件使用时可以使用v-bind的方式将数据传递给cmessage和cnumber
				props:{
					cmessage:{
						type:String, //指定父组件需要传递数据的类型
						default:'嘿嘿嘿', //指定父组件需要传递数据的默认值
						required:true //指定父组件使用子组件时，必须传递该数据
					},
					cnumber:{
						type:Number,
						default:55,
						required:false
					}
				}
			}
		}
    })
</script>
</body>
</html>

效果如下：
在这里插入图片描述

（1.3）父组件传递数据给子组件的过程图解

因为组件之间数据的传递比较繁杂，这里使用图解的方式表示一下。
在这里插入图片描述

（1.4）子组件中使用驼峰标识及没有跟标签的坑

子组件中使用驼峰标识变量的坑

子组件中使用驼峰标识的变量来接受父组件传递过来的数据时，会导致父组件传递数据失败。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app1">
	<!--使用组件-->
	<mycpnc :cMessage="message"></mycpnc>
</div>

<!--使用template标签抽离组件模板-->
<template id="script_template">
	<div>
		<h3>{{cMessage}}</h3>
	</div>
</template>

<!--引入本地的vue.js文件-->
<script src="../vue.js"></script>

<script>
    let app = new Vue({
        el: '#app1', // 讲这个vue实例与id为app1的标签关联起来
        data: {
			message: '哈哈哈',
			number: 10
		},
		//使用语法糖方式注册局部组件
		components: {
			'mycpnc':{
				template: '#script_template',
				
				props:{
					cMessage:{
						type:String, //指定父组件需要传递数据的类型
						default:'我是默认值', //指定父组件需要传递数据的默认值
						required:true //指定父组件使用子组件时，必须传递该数据
					},
				}
			}
		}
    })
</script>
</body>
</html>

效果如下：
在这里插入图片描述
所有我们在定义子组件用于接受数据的变量时，应该避免使用驼峰标识。如果一定要使用驼峰标识，那么中父组件给子组件传递数据时，应将子组件的属性使用’-'连接来代替驼峰标识。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app1">
	<!--使用组件-->
	<mycpnc :c-message="message"></mycpnc>
</div>

<!--使用template标签抽离组件模板-->
<template id="script_template">
	<div>
		<h3>{{cMessage}}</h3>
	</div>
</template>

<!--引入本地的vue.js文件-->
<script src="../vue.js"></script>

<script>
    let app = new Vue({
        el: '#app1', // 讲这个vue实例与id为app1的标签关联起来
        data: {
			message: '哈哈哈',
			number: 10
		},
		//使用语法糖方式注册局部组件
		components: {
			'mycpnc':{
				template: '#script_template',
				
				props:{
					cMessage:{
						type:String, //指定父组件需要传递数据的类型
						default:'我是默认值', //指定父组件需要传递数据的默认值
						required:true //指定父组件使用子组件时，必须传递该数据
					},
				}
			}
		}
    })
</script>
</body>
</html>

运行效果如下：
在这里插入图片描述

子组件模板中不使用跟标签的坑

当在我们子组件模板使用了多个变量来渲染内容时，如果子组件的模板中未使用跟标签，会导致只有一个变量的数据能渲染成功，其他变量数据不会被渲染。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app1">
	<!--使用组件-->
	<mycpnc :c-message="message" :c-number="number"></mycpnc>
</div>

<!--使用template标签抽离组件模板-->
<template id="script_template">
		<h3>{{cMessage}}</h3>
		<h3>{{cNumber}}</h3>
</template>

<!--引入本地的vue.js文件-->
<script src="../vue.js"></script>

<script>
    let app = new Vue({
        el: '#app1', // 讲这个vue实例与id为app1的标签关联起来
        data: {
			message: '哈哈哈',
			number: 10
		},
		//使用语法糖方式注册局部组件
		components: {
			'mycpnc':{
				template: '#script_template',
				
				props:{
					cMessage:{
						type:String, //指定父组件需要传递数据的类型
						default:'我是默认值', //指定父组件需要传递数据的默认值
						required:true //指定父组件使用子组件时，必须传递该数据
					},
					cNumber:{
						type:Number,
					}
				}
			}
		}
    })
</script>
</body>
</html>

效果如下：
在这里插入图片描述
所有我们在定义子组件的模板时，最好加上一个跟标签div

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app1">
	<!--使用组件-->
	<mycpnc :c-message="message" :c-number="number"></mycpnc>
</div>

<!--使用template标签抽离组件模板-->
<template id="script_template">
	<div>
		<h3>{{cMessage}}</h3>
		<h3>{{cNumber}}</h3>
	</div>
</template>

<!--引入本地的vue.js文件-->
<script src="../vue.js"></script>

<script>
    let app = new Vue({
        el: '#app1', // 讲这个vue实例与id为app1的标签关联起来
        data: {
			message: '哈哈哈',
			number: 10
		},
		//使用语法糖方式注册局部组件
		components: {
			'mycpnc':{
				template: '#script_template',
				
				props:{
					cMessage:{
						type:String, //指定父组件需要传递数据的类型
						default:'我是默认值', //指定父组件需要传递数据的默认值
						required:true //指定父组件使用子组件时，必须传递该数据
					},
					cNumber:{
						type:Number,
					}
				}
			}
		}
    })
</script>
</body>
</html>

效果如下：
在这里插入图片描述

（2）子组件传递数据给父组件-通过自定义事件

在这里插入图片描述
子组件传递数据给父组件流程：

  • 子组件使用$emit()来发送自定义事件。
    this.$emit('自定义事件的名称','需要传递的数据')
  • 父组件中使用v-on监听子组件中发送的自定义事件

案例：在子组件中定义数据count，并创建两个按钮+-。实现点击按钮后count加或者减1。并将子组件中的count数据传递到父组件的fcount中，进行展示。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<!--父组件模板-->
<div id="app1">
	<!--使用组件-->
	<!--父组件中使用v-on来监听子组件的自定义参数，注意这里不需要传入实参。因为子组件自定义事件时的第二个参数this.count，会作为默认参数传进来-->
	<mycpnc @cclick="faccpet"></mycpnc>
	<h3>{{fcount}}</h3>
</div>

<!--使用template标签抽离组件模板-->
<template id="script_template">
	<div>
		<button type="button" @click="addclick">+</button>
		<button type="button" @click="reduceclick">-</button>
	</div>
</template>

<!--引入本地的vue.js文件-->
<script src="../vue.js"></script>

<script>
    let app = new Vue({
        el: '#app1', // 讲这个vue实例与id为app1的标签关联起来
        data: {fcount:0},
		methods: {
			//子组件自定义事件的监听方法，注意这里必须要有形参item。
			faccpet: function(item){
				this.fcount = item;
			}
		},
		//使用语法糖方式注册局部组件
		components: {
			'mycpnc':{
				template: '#script_template',
				data: function(){
					return {count:0}
				},
				methods:{
					addclick: function(){
						this.count++;
						//发送自定义事件，第一个参数为自定义事件的名称，第二个参数为需要传递的数据
						this.$emit('cclick',this.count);
					},
					reduceclick: function(){
						this.count--;
						this.$emit('cclick',this.count);
					}
				}
			}
		}
    })
</script>
</body>
</html>

效果如下：
在这里插入图片描述

4.子组件中改变父组件传递过来的数据

前面我们讲了父组件传递给子组件的数据是保存在props中，当我们需要使用该数据时，直接使用props中的变量即可。但是当我们需要改变父组件传递过来的数据时，可以直接改变props中变量的值吗？

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app1">
	<!--使用组件-->
	<mycpnc :cmessage="message"></mycpnc>
</div>

<!--使用template标签抽离组件模板-->
<template id="script_template">
	<div>
		<button type="button" @click="cmessage++">+</button>
		<button type="button" @click="cmessage--">-</button>
		<h3>{{cmessage}}</h3>
	</div>
</template>

<!--引入本地的vue.js文件-->
<script src="../vue.js"></script>

<script>
    let app = new Vue({
        el: '#app1', // 讲这个vue实例与id为app1的标签关联起来
        data: {message:0},
		//使用语法糖方式注册局部组件
		components: {
			'mycpnc':{
				template: '#script_template',
				props:['cmessage']
			}
		}
    })
</script>
</body>
</html>

结果如下：
在这里插入图片描述
那么如何解决这个问题呢？答案就是将父组件传递过来的数据存放到子组件的data属性中，如何改变data中的值。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app1">
	<!--使用组件-->
	<mycpnc :cmessage="message"></mycpnc>
</div>

<!--使用template标签抽离组件模板-->
<template id="script_template">
	<div>
		<button type="button" @click="dmessage++">+</button>
		<button type="button" @click="dmessage--">-</button>
		<h3>{{dmessage}}</h3>
	</div>
</template>

<!--引入本地的vue.js文件-->
<script src="../vue.js"></script>

<script>
    let app = new Vue({
        el: '#app1', // 讲这个vue实例与id为app1的标签关联起来
        data: {message:0},
		//使用语法糖方式注册局部组件
		components: {
			'mycpnc':{
				template: '#script_template',
				props:['cmessage'],
				data:function(){
					return {
						dmessage:this.cmessage //将props中的cmessage值保存到data中的dmessage中
					}
				}
			}
		}
    })
</script>
</body>
</html>

结果如下：
在这里插入图片描述
总结：

父组件传递数据给子组件，子组件中需要在props中设置变量来接受数据。当我们需要展示数据时，直接使用props中的变量即可。但是当我们需要改变数据时，可以直接改变props中的变量，但是代码会有警告所有不推荐这种方式。推荐将props中的变量赋值给data中的一个变量，如何通过改变data中的变量，来改变数据的值。

new nm个对象
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue-qrcode：Vue.js的QR码组件
02-06
vue-qrcode Vue 3的QR代码组件，基于 。 主要档案 dist/ ├── vue-qrcode.js (UMD, default) ├── vue-qrcode.min.js (UMD, compressed) ├── vue-qrcode.esm.js (ECMAScript Module) └── vue-qrcode.esm.min.js (ECMAScript Module, compressed) 入门 安装 npm install vue qrcode @chenfengyuan/vue-qrcode 在浏览器中： < scrip
vue子组件调用父组件中的方法、值的几种方式
最新发布
高宇辰
08-12 5630
有时候，我们会把方法定义在父组件中，然后在多个子组件中调用父组件的方法，这是很常见的场景。那么，在子组件中调用父组件的方法有哪几种方式呢？
vue子组件的表单使用父组件的数据并修改值，同步数据到父组件
weixin_44643019的博客
11-24 1381
vue子组件的表单使用父组件的数据并修改值，同步数据到父组件
前端vue中父子组件之间的传值（修改值）和事件的相互调用
qq_52135683的博客
04-16 4418
在Vue中，子组件不能直接改变父组件的数据，因为Vue是单向数据流的。但是可以通过触发父组件的事件并传递数据来实现子组件改变父组件的数据。父组件可以在模板中监听这个自定义事件，并定义相应的事件处理函数来响应子组件的操作。父组件可以在模板中监听这个自定义事件，并定义一个相应的方法来处理子组件的操作。在父组件模板中使用子组件，并为该组件绑定一个自定义事件，当子组件需要修改数据时，就会触发这个事件。在子组件中，通过修改该属性的值，就能够直接修改父组件的数据。事件，并将其绑定到一个方法上，用于更新父组件中的数据。
vue父子组件传值
A20201130的博客
05-14 488
一、父组件向子组件传值 1.在子组件的调用标签上使用自定义属性进行传值 2.子组件通过props属性进行接收，子组件把接受来的数据当成data里数据来使用 3.props只能是父组件向子组件进行传值，props使得父子组件之间形成了一个单向下行绑定。子组件的数据会随着父组件 4.props可以显示定义一个或一个以上的数据，对于接收的数据可以是各种数据类型，同样也可以传递一个函数 <body> <!-- 父-》子
父子组件分页的的props传递，如何把props中的值保存到data中
weixin_46463984的博客
09-13 2144
父子组件分页的的props传递 在封装一些组件的同时可能会夹杂着分页组件一起封装，这就面临一个问题，关于每次分页的当期页面的最新值，如何在父子组件中传递的问题。我也是最近开发遇到的困难，由于对vue的熟悉程度不够，网上的答案有时并不能解决值传递的问题。再次做一个关于父子组件分页的的props传递记录。以便帮助更多新学习vue的小伙伴参考。 基本的父子组件通信，父传子 父组件定义一组数据或单个数据，在引用子组建的时候传递值 使用 v-bind: 动态绑定 子组件使用props接收。 基本的父子组件通信，
Vue2.0子父组件通信
大灰狼的小绵羊哥哥的博客
03-01 1040
Vue是一个轻量级的渐进式框架，对于它的一些特性和优点在此就不做赘述，本篇文章主要来探讨一下Vue子父组件通信的问题 首先我们先搭好开发环境，我们首先得装好git和npm这两个工具(如果有不清楚的同学请自行百度哦) 环境搭建步骤： 打开git ，运行 npm install --global vue-cli 这是安装vue的命令行vue init webpack vue-de
vue项目：父组件向子组件传值，子组件需要对传过来的数据进行修改问题
BoZai_ya的博客
06-15 3139
在写vue+ant项目时，子组件对父组件传递过来的数据进行修改报错问题！
vue 父组件向子组件传值，灵活的 data，死板的 props
weixin_43798490的博客
02-27 3774
事件驱动 在前端来说数据驱动式框架，必然离不开事件驱动，事件驱动一定程度上弥补了数据驱动的不足，在dom操作的时代通常都是这样操作： 通过特定的选择器查找到需要操作的节点 -&gt; 给节点添加相应的事件监听 响应用户操作，效果是这样： 用户执行某事件（点击，输入，后退等等） -&gt; 调用 JavaScript 来修改节点 这种模式对业务来说是没有什么问题，但是从开发成本和效率来说会比较力不从...
data函数,组件分离,父组件向子组件传值
qq_55574785的博客
03-09 510
组件分离 将组件内容写在外面,用变量名引用 将template模板写在body中,用id名引用 <div id="box"> <aaa></aaa> <g-nav></g-nav> </div> <template id="a"> <div> <p>1</p>
Vue.js：轻量高效的前端组件化方案
02-26
摘要：Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统。在前端纷繁复杂的生态中，Vue.js有幸受到一定程度的关注，目前在GitHub上已经有5000+的star。本文将从各方面对Vue.js做一个深入的介绍。Vue.js是我在...
vue-monaco：Vue.js的MonacoEditor组件
02-06
维摩纳哥 是支持VS Code的代码编辑器，由于此项目，现在可以作为Vue组件<MonacoEditor> 。安装npm install vue-monaco 要么yarn add vue-monaco用法将ESM版本与Webpack一起使用使用 ： // webpack.config.jsconst ...
vue-barcode:Vue.js的条形码组件
05-22
条形码 基于Vue 3的条形码组件。主要档案 dist/├── vue-barcode.js (UMD, ... script src =" /path/to/vue.js " > </ script > <!-- Vue.js is required -->< script src =" /path/to/JsBarc
vue中怎么吧props中的属性传给data里的属性
weixin_42608318的博客
01-14 1239
在 Vue 中，可以在组件的 created 钩子函数中将 props 中的属性赋值给 data 中的属性。 示例代码： <template> <div>{{ message }}</div> </template> <script> export default { props: ['message'], data() {...
android组件间传递大量数据
xiyangyang8110的博客
05-08 1407
intent作为一种及时性的组件间数据传递方式非常好用，但是当传递的数据大于1M时，就力不从心了，很可能导致OOM,怎么办？ 此时只能改变存储类型为永久存储，官方推荐ContentProvider;更大的数据可以用MemoryFile PS：使用intent传参实际上是保存到bundle里面了 intent源码 public Intent putExtra(String name, Parce
Vue组件间的数据共享（父子，兄弟，后代，全局事件总线，Vuex）
切图仔
04-21 4449
Vue组件间的数据共享（父子，兄弟，后代，Vuex）
组件之间数据信息传递方法
weixin_50443809的博客
05-07 1438
方法一 将组件中需要传递的东西交给共同的父亲，父亲再将数据交给其中一个儿子，这个过程通过props的方法传递，让son2接收 props['xxx'],此时接收的数据出现在son2的实例对象vc身上，所以模板可以使用。 此时son1要获得数据1，father就要提前创造一个函数传递给son1,然后son1调用函数。此时就可以定义在father中的函数，进行操作，这就意味着只要son1调用函数，vue就会重新解析模板，然后更新数值。 ......
Vue 爬坑之路（二）—— 组件之间的数据传递
weixin_34192993的博客
01-09 455
Vue 的组件作用域都是孤立的，不允许在子组件的模板内直接引用父组件的数据。必须使用特定的方法才能实现组件之间的数据传递。 首先用 vue-cli 创建一个项目，其中 App.vue 是父组件，components 文件夹下都是子组件。 一、父组件向子组件传递数据 在 Vue 中，可以使用 props 向子组件传递数据。 子组件部分： 这是 header.vue 的...
VUE学习笔记：5.vue中判断指令，v-show及v-for的使用
ouyicnm的博客
06-06 4574
一.vue中的判断指令 1.判断指令的使用 vue中的判断指令使用v-if="true/false"，v-else-if="true/false"，v-else来完成。其中v-if和v-else-if后面跟的表达式或者变量值必须为布尔类型。 当条件判断不满足时，页面不会加载对应的标签及子标签。 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title&
vue使用ts 引入组件_（Vue起步）4.组件使用:Vue.component（props/template）
06-06
当使用 TypeScript 开发 Vue 组件时，可以使用 @Component 装饰器来定义组件。...Vue.component('my-component', MyComponent); ``` 然后在模板中使用： ```html <my-component prop-a="Hello" :prop-b="200"> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值