vue父子组件传递参数详解

VUE 父子组件传参

父页面，也可以理解为：就是你的最外面的页面 取名为 ： index.vue

<div :class="[ about ? 'jobClassWhole' : 'jobClassWhole-alone']">
	<jobClassification @navClick="navClick" :params="isDisplay">jobClassification>
div>

<script>
// 用 import 引入子组件的地址
import jobClassification from "@/components/views/industry/jobClassification.vue";
export default{
	// 注册子组件
	components:{
		jobClassification
	}，
	data(){
		return {
			isDisplay : false, // 传递给子组件的参数 上面的 :params
		}
	},
	method :{
		navClick(id){
			// 子组件传递过来的参数，需要在父组件的点击事件中，接收
			// 点击事件 要写的逻辑内容....
		}
	}
}
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

子组件 ： 要传递给父组件参数，或者接收父组件传递过来的参数，取的名字 要和 父组件里面引用的组件名字一样
取名为 ：jobClassification.vue 对应 ==>

<div  @click="clickTitleParent()">

	<text>{{ params }}text>
div>
<script>
export default{
// 这里面接收父组件传过来的参数 ，并设置params的格式
	props:{
		params:  Boolean  // 设置了 布尔值
	},
// 下面是 像父组件传递参数 如上面 子组件的 点击事件 ：@click="clickTitleParent()"
 method :{
 	clickTitleParent(){
 		this.$emit('navClick', "我是传递过去的参数呀")
 	},
 	// navClick 是父组件要时间的 点击事件的方法，后面的值 是要传递过去的参数，可以是字符串，布尔，数组等
 }
	
}
script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21