父子组件传参

系列文章目录

提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加
例如：第一章 Python 机器学习入门之pandas的使用

---

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

一、⽗组件向⼦组件传参

⽗组件直接绑定在⼦组件的标签上，⼦组件通过props接收传递过来的参数

//父组件
<template>
 	<div>
		<child-module :content="content"/>
 	</div>
</template>
<script>
	import ChildModule from '@/components/ChildModule.vue'
	export default {
 	name: 'FatherModule',
	components: {
 		ChildModule
 		},
 	data() {
 	return {
 		content: "text"
 		}
 		}
}
</script>

//子组件
<template>
 <div>
 <div>{{ content }}</div>
 </div>
</template>
<script>
export default {
 	name: 'ChildModule',
	 props: {
 	content: {
 	// 定义接收的类型 还可以定义多种类型 [string，Undefined，Number]// 如果req
	//	uired为true,尽量type允许undefined类型，因为传递过来的参数是异步的。或				者设置默认值
	 type: String,
	 // 定义是否必须传
	 required: true,
	 // 定义默认值
 	default: '暂⽆'
 		}
 	}
}
</script>

二、⼦组件向⽗组件传参

⼦组件向⽗组件传参 $emit

import numpy as np
import pandas as pd
import matplotlib.pyplot as plt
import seaborn as sns
import warnings
warnings.filterwarnings('ignore')
import  ssl
ssl._create_default_https_context = ssl._create_unverified_context

2.读入数据

代码如下（示例）：

//父组件
<template>
 	<div>
 		<child-module
 			ref="childModuleRef"
 			:content="content"
 				@getData="getData"/>
 		<div>{{ childValue }}</div>
 	</div>
</template>
<script>
import ChildModule from '@/components/ChildModule.vue'
export default {
 name: 'FatherModule',
 components: {
 ChildModule
 },
 data() {
 return {
 content: "text",
 childValue: ''
 	}
 },
 methods: {
 // childrenData就是⼦组件传递过来的参数
 getData(childrenData) {
 console.log(childrenData)
 this.childValue = childrenData
 }
 }
}
</script>

<template>
 	<div>
 		<div>{{ content }}</div>
 		<button @click="onClick">点击向⽗组件传参</button>
 	</div>
</template>
<script>
export default {
 	name: 'ChildModule',
 	props: {
 	content: {
 		// 定义接收的类型 还可以定义多种类型 [string，Undefined，Number]// 如果req
		//uired为true,尽量type允许undefined类型，因为传递过来的参数是异步的。或者设置默认值
 type: String,
 // 定义是否必须传
 required: true,
 // 定义默认值
 default: '暂⽆'
 },
 },
 data() {
 return {
 num: 1
 }
 },
 methods: {
 onClick() {
 this.$emit("getData",this.num)
 }
 }
}
</script>