# 组件component（二）父组件和子组件之间传递数据

最新推荐文章于 2024-05-04 22:40:55 发布

m0_47761892

最新推荐文章于 2024-05-04 22:40:55 发布

阅读量1k

点赞数

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

本文链接：https://blog.csdn.net/m0_47761892/article/details/128791323

版权

Vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

组件component（二）父组件和子组件之间传递数据

1.父组件=>子组件

由于组件实例的作用域是相互独立的，所以子组件的模板无法直接引用父组件的数据。可以通过props实现。是父组件用来传递数据的一个自定义属性，子组件需要**显式的用props选项**来声明Prop.
如果Prop传递的是一个数组或对象，那么它是按引用传递的。在子组件修改这个对象或者数组，则会影响父组件的状态

1.子组件=>父组件

如果子组件要把数据会传给父组件，需要使用自定义事件来实现。
父组件可以通过 v-on (缩写为 @) 来监听子组件实例的自定义事件，子组件可以直接使用 $emit 方法并传入事件名称来触发自定义事件

简单示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>父组件和子组件之间互相传送数据</title>
		<script src="js/v2.6.10/vue.min.js"></script>
	</head>
	<body>
		<div id="app">
			1.传递静态数据：<my-com my-message="新年快乐"></my-com>
			2.传递动态数据：<my-com :my-message="msg"></my-com>
			3.传递数组：<my-arr :arr='type'></my-arr>
			4.传递对象：<my-obj :stu='stu'></my-obj>
			5.传递对象属性：<my-obj2 v-bind='stu'></my-obj2>
			<span :style="{fontSize:fz+'px'}">6.子组件回传数据：</span>
			<my-font @action='rec'></my-font>
		</div>
		<script>
			Vue.component('my-com',{
				props:['myMessage'],
				template:'<div>{{myMessage}}</div>'
			})
			Vue.component('my-arr',{
				props:['arr'],
				template:'<ol><li v-for="value in arr" >{{value}}</li></ol>'
			})
			Vue.component('my-obj',{
				props:['stu'],
				template:'<div>{{stu.name}}--{{stu.age}}--{{stu.sex}}</div>'
			})
			Vue.component('my-obj2',{
				props:['name','age','sex'],
				template:'<div>{{name}}--{{age}}--{{sex}}</div>'
			})
			Vue.component('my-font',{
				template:'<div> \
					<button @click="enlarge(5)">向上传递单个数据</button> \
					<br><button @click="enlarge(childarr)">向上传递data中的对象据</button> \
					</div>',
				data(){
					return{
						childarr:{name:'张三',age:15,sex:'female'}
					}
				},
				methods:{
					enlarge(value){
						console.log('enlare text--',value)
						this.$emit('action',value)
					}
				}
			})
			var demo=new Vue({
				el:'#app',
				data:{
					msg:'新年第一天',
					type:['html','css','javascript'],
					stu:{name:'zhangsan',age:20,sex:'female'},
					fz:10
				},
				methods:{
					rec(rec1){
						console.log('父组件接收到的数据：',rec1);
						this.fz+=rec1
					
					}
				}
			})
		</script>
	</body>
</html>