Vue组件通信(父传子、子传父、兄弟通信)，前端面试2024

2 . 子组件son代码如下：

{{ sonMsg }}

子组件接收到内容：{{ faMsg }}

子组件通过props来接受数据

第一种方法

props: [‘childCom’]

第二种方法

props: {

childCom: String //这里指定了字符串类型，如果类型不一致会警告的哦

}

第三种方法

props: {

childCom: {

type: String,

default: ‘sichaoyun’

}

}

二.子组件向父组件传值

---

通过绑定事件然后及$emit传值

vue2.0只允许单向数据传递，我们通过出发事件来改变组件的数据

1.父组件parent代码如下:

父组件通过绑定自定义事件，接受子组件传递过来的参数

{{ msg }}

父组件接手到的内容：{{ username }}

<son psMsg=“我是你爸爸” @transfer=“getUser”>

2.子组件son代码如下：

子组件通过$emit触发父组件上的自定义事件，发送参数

{{ sonMsg }}

子组件接收到内容：{{ psMsg }}

<button @click=“setUser”>传值

3. 非父子传参 （事件总线）

假设你有两个Vue组件需要通信： A 和 B ，A组件按钮上面绑定了点击事件，发送一则消息，B组件接收。

1. 初始化，全局创建$bus

直接在项目中的 main.js 初始化 $bus :

// main.js

window.$bus=new Vue();

注意，这种方式初始化一个 全局的事件总线 。

2. 发送事件

$bus.$emit("aMsg", '来自A页面的消息');

<button @click=“sendMsg()”>-