vue子组件给父组件传值及父组件给子组件传值

最新推荐文章于 2025-10-20 23:24:38 发布

转载最新推荐文章于 2025-10-20 23:24:38 发布 · 760 阅读

4 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/weixin_38888773/article/details/81902789

vue 专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了Vue.js中子组件向父组件以及父组件向子组件传递数据的方法。子组件使用this.$emit()发送数据给父组件，而父组件通过props属性将数据传递给子组件。

引自：https://blog.youkuaiyun.com/weixin_38888773/article/details/81902789

子组件给父组件传值

子组件：


<template>
    <div class="app">
       <input @click="sendMsg" type="button" value="给父组件传递值">
    </div>
</template>
<script>
export default {
 
    data () {
        return {
            //将msg传递给父组件
            msg: "我是子组件的msg",
        }
    },
     methods:{
         sendMsg(){
             //func: 是父组件指定的传数据绑定的函数，this.msg:子组件给父组件传递的数据
             this.$emit('func',this.msg)
         }
     }
}
</script>

子组件通过this.$emit()的方式将值传递给父组件

注意：这里的func是父组件中绑定的函数名

父组件：

<template>
    <div class="app">
        <child @func="getMsgFormSon"></child>
    </div>
</template>
<script>
import child from './child.vue'
export default {
    data () {
        return {
            msgFormSon: "this is msg"
        }
    },
    components:{
        child,
    },
    methods:{
            getMsgFormSon(data){
                this.msgFormSon = data
                console.log(this.msgFormSon)
            }
    }
}
</script>

父组件给子组件传值

父组件：

<template>
    <parent>
        <child :list="list"></child> //在这里绑定list对象
    </parent>
</template>
import child from 'child.vue';
export default{
  components:{child},
　　data(){
　　 return {
　　 //父组件的数据绑定到子组件的包裹层上 
　　list:["haha","hehe","xixi"];
 }
}

子组件：

<template>
   <ul>
        <li v-for="(item ,index)in list">{{item}}</li>
    </ul>
</template>
export default{
     props:{
　　　　list:{
　　　　　　type:Array,//type为Array,default为函数
　　　　　　default(){
　　　　　　　　return [
　　　　　　　　　　"hahaxixihehe"//默认初始值
　　　　　　　　]}}
　　　　},//用props属性进行传数据，此时子组件已经获取到list的数据了
       data(){
         return {}  
    }   
}