vue通讯 传值 3大传值方法 快速上手 父子间传值和非父子间传值_vue3 父子传参 数据很大咋办

文末

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；

• 大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。

// 这是子组件

2 . 在子组件中通过props传递过来的数据


Vue,component(‘child’,{

props:[‘message’]

})


### 二. 子组件向父组件传值


1. 子组件中需要一个点击事件触发一个自定义事件


Vue.component(‘child’,{

methods:{

handleClick(){

// 在相应该点击事件的函数使用$emit来触发一个自定义事件,并传递一个参数

    this.$emit('parentClick',123)

}

},

template:`

    <h1>这是子组件</h1>

    <button @click="handleClick" >

        发送给父组件            </button>

</div>

`

})


2.在父组件中的子标签监听该自定义事件得到传递的值


Vue.component(‘parent’, {

data() {

return {

    msg: '我是子组件'

}

},

methods: {

receiveMsg(value) {

    console.log(value)

    this.msg = value

}

},

template:’

    <h1>这是子组件</h1>

    <p>接收子组件传过来的值{{msg}}</p>

    <child @parentClick='receiveMsg'></child>

</div>

’

})


### 三. 非父子组件传值



### 文末

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。



个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

![](https://img-blog.csdnimg.cn/img_convert/3e0d5b0f6a97b823cc1ef22ff1a18191.png)



第二阶段:移动端开发技术

![](https://img-blog.csdnimg.cn/img_convert/fc21db0a800494796dc6408ce1486031.png)

第三阶段:前端常用框架

![](https://img-blog.csdnimg.cn/img_convert/644efd4ddd0f8d43535f1982ec0da6e4.png)



**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

*   推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；

*   大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。