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 的信号发送，只不过关联方式不一样的，思想都是一样的。

父组件接受子组件传入的参数

例子完整代码展示

例子显示效果