Vue学习之父子组件传参

文章目录[隐藏]

前言

这几天在学习 Vue 的时候,学习了 Vue 组件的父子组件,父子组件显得尤为重要。

例子

新建一个子组件
components: {
	'blog-post': {
		props: {
			myTitle: String
		},
		template: '<h2 @click="h2Click">{{myTitle}}</h2>',
		methods: {
			h2Click: function(){
				let index = 1; // 传出的参数
				this.$emit('send-data', index);
			
			}
		}
	}
}
使用组件
<div id="app">
	<blog-post 
		:my-title="title"
		@send-data="handleClick"
	>
	</blog-post>
</div>
父组件向子组件传参方式
v-bind 和属性方式:

属性方式: 传递的是一个字符串
v-bind: 传递的是一个 js 表达式
子组件向父组件传参
$emit('信号名', 参数 1,参数 2,参数 3...参数 n)  //
注意: 此处信号名。始终是横线连接 (kebab-case),再页面中也是这种方式,如下 send-data。

 // 备注: 如果使用过 Qt 的话其实有点类似 Qt 的信号发送,只不过关联方式不一样的,思想都是一样的。

Vue学习之父子组件传参
父组件接受子组件传入的参数

Vue学习之父子组件传参

Vue学习之父子组件传参
例子完整代码展示

Vue学习之父子组件传参

例子显示效果

Vue学习之父子组件传参
posted @ 2020-02-02 14:52  不随。  阅读(9)  评论(0编辑  收藏  举报  来源