前端面试题 Vue 组件通信(父传子,子传父,跨组件传值)

目录

一, 简单介绍组件通信

二, 详解传值方法

1.父传子 props

2.子传父 $emit

3.跨组件通信 event-bus

---

一, 简单介绍组件通信

        我们知道在现在的开发环境下,不管前后端开发都是组件化模块化,这是因为组件的优势无比的巨大,可以进行多次的复用增加开发效率,也可以分类鲜明,便于维护,而我今天所写的就是开发中分割成不同的组件互相传递数据和互动

        我的工作中常用地组件通信大致分为三类: 父传子 , 子传父 , 跨组件传值

        下面就来分别介绍一下 我常用的这三种传值方法

二, 详解传值方法

        父子组件的确认方法:我将 B 组件import引入到 A 组件中,那么 B 就是 A 的子组件,A 就是 B 的父组件

1.父传子 props

        简而言之,父传子就是父组件把数据传给子组件,具体就是如下,在子组件的props中定义自定义属性来待接收父组件的数据,有两种方法 如下:

        第一种,也是最推荐用的一种,以复杂类型的方式进行声明,这样存储的便是一个地址,可以和父组件的数据进行双向绑定,同步数据,虽然可以双向绑定,但是在Vue2.0中还是不可以直接在子组件中更改父组件的数据,需要用到子传父才行,这点等下会写到

        这里只是用 text 举个栗子,具体叫什么都可以哈,只是父子里面需要对应上相同

        这个 text 接收到数据后的使用方法和一般data中声明的变量一样,只是不能再子组件中改变他

子组件中:        props 定义属性接收

<template>
  <div>
    <h2>son组件</h2>
    <p>props:{
  { text }}</p>
  </div>
</template>

<script>
export default {
  // 在此处定义props
  props: {
    // props中定义 接收父组件数据的自定义属性,叫什么都可以,我随便起了个text
    text: {
      type: String,    // type 是用来规定此属性接收到的数据的数据类型
      default: "未传递时默认的文字"    // 这个default是当这个 text 没有接收到传递的数据时的默认值
    }
  }
}
</script>

父组件中:        标签内 传递数据

<template>
  <div id="app">
    <!-- 
      这里的text就是子组件props里定义的tex