前言:示例图

一、子组件向父组件传值
传值:this.$emit('方法名','值')
接收:在父组件上加上@emit的方法名="方法名($event)"
子组件:
querydata() {
//第一个参数是父组件接受的触事件,第二个参数是值,可以是数组或者单独值
this.$emit('querydata', this.queryinfo)
},
父组件:
<template>
<View_dashboard ref="dasboard" @querydata="querydata($event)"/>
</template>
<script>
import View_dashboard from './dashboard.vue'
export default {
components: {
View_dashboard//注册组件
},
data(){
return{
queryinfo:{}
}
},
created(){
this.querydata()
}
methods:{
querydata(queryinfo) {
this.queryinfo = queryinfo
},
}
</script>
二、父组件向子组件传值
父组件向子组件传值:动态值用 【:子组件接收的方法名=‘值’】;静态值用【子组件接收的方法名=‘值’】
子组件接收:props: {
DataSource:{
Type: Array,//类型:Array数组、String字符串、Boolean布尔值、Int整型(具体使用情况多)、Object对象
default: []
}
}
父组件:
<template>
<View_dashboard ref="dasboard" :DataSource="DataSource"/>
</template>
<script>
import View_dashboard from './dashboard.vue'
export default {
components: {
View_dashboard//注册组件
},
data(){
return{}
},
methods:{
}
</script>
子组件:
<template>
<div>{{this.DataSource}}</div>
</template>
<script>
export default{
props: {
DataSource:{
Type: Array,//类型:Array数组、String字符串、Boolean布尔值、Int整型(具体使用情况多)、Object对象
default: []
}
}
}
</script>
1065

被折叠的 条评论
为什么被折叠?



