Vue2子组件向父组件传值&父组件向子组件传值

原创已于 2025-07-29 11:25:25 修改 · 311 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

于 2025-07-29 11:21:51 首次发布

vue特辑专栏专栏收录该内容

2 篇文章

订阅专栏

前言：示例图

一、子组件向父组件传值

传值：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>