vue组件通信 - 父向子传、子向父传（详细步骤）

搬砖IT员

已于 2023-01-14 09:49:19 修改

阅读量1.8k

点赞数 6

分类专栏： vue 前端文章标签： vue.js 前端 javascript

于 2023-01-13 21:07:42 首次发布

本文链接：https://blog.csdn.net/gjt1234/article/details/128679080

版权

前端同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

vue

6 篇文章 0 订阅

订阅专栏

一、父组件向子组件传值

1、要传递的值为普通数据类型的值，

2、要传递的值为复杂数据类型、被变量接收的值类型

二、子组件向父组件传值

三、扩展

(注意：谁被引入，谁即为子组件）

一、父组件向子组件传值

以要传递的数据类型可分为两种情况

1、要传递的值为普通数据类型的值，

父组件内传值~(直接在组件标签内使用，以键值对形式书写）

<组件名 title="小朋友" uname="小明"> </组件名>

子组件内接收值~ (注意要与父组件内定义的变量名一致)


export default {
    props: ["title" , "uname"]
}

2、要传递的值为复杂数据类型、被变量接收的值类型

父组件传值 ~ (在标签内以动态属性绑定的形式传入变量)

<template>
    <div>
        <组件名 ：title="myTitle" :list="arr"> </组件名>   <!--myTitle、myName变量都已有值-->
    </div>
</template>

子组件内接收值~ (此为props的常用形式)(注意要与父组件内定义的变量名一致)

export default{
    props:{
        title:{
            type:String //此为title的数据类型
            },
        list:{
            type: Array //此为list的数据类型
            }
    }
}

二、子组件向父组件传值

实现语法：

父组件中： @自定义事件名 = " 父内methods 函数名 "

子组件中： this.$emit(“父内的自定义事件名” , 要传的值 )

子组件内传值~

export default{
    methods:{
        btn(){  //点击按钮发送子内的数据
            this.$emit("自定义事件名" , 要传递的数据)
        }
    }
}

父组件内接收值

//须在组件名标签上 创建桥梁
<template>
    <div>
        <组件名 @子内的自定义事件名 = " 父内的函数名">  </组件名>
    </div>
</template>

export default{
    methods:{
        组件名标签内定义的函数名 (val) {  //此val形参即是从子组件接收到的传递值
             this.uname = val  //改变自身值
    }
}

三、扩展

1、<comA> </comA> 若标签内无数据即可简写为 <comA />

2、<comA> </comA> 写法等于 <com-a> </com-a>

2、$parent 可以在子组件内获取到父组件内所有的实例对象且可访问方法、对象

3、$refs 可以在父组件中获取到子组件内所有的实例对象且可访问方法、对象

                在组件中设置 ref="myRef"
                   例：<comA @updateInfo=" message = $event " ref="myRef"> </comA>
                 this.$refs.myRef 就可以得到子组件中的实例对象