系列文章目录
提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加
例如:第一章 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>