vue父子组件传递参数详解

VUE 父子组件传参

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

<!-- 
 解释：
 :class 绑定样式， 不多介绍
 jobClassification 引入子组件 要引入子组件的标签
  @navClick="navClick"  子组件传递过来的 点击事件
  :params="isDisplay"   传递给子组件的参数
  -->
<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>

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

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