【前端知识之Vue】Vue组件间的通信方式

前言

本系列主要整理前端面试中需要掌握的知识点。本节介绍Vue组件间的通信方式。

---

一、组件间的通信方式分类

• 父子组件之间的通信；
• 兄弟组件之间的通信；
• 祖孙与后代组件之间的通信；
• 非关系组件之间的通信。

二、props传递数据

• 适用场景：父组件传递数据给子组件；
• 子组件设置props属性，定义接收父组件传递过来的参数；
• 父组件在使用子组件标签中通过字面量来传递值

Person.vue

<template>
  <div>
    Person
    <Student1 name="jack" age="18"></Student1>
    </div>
</template>

<script>
import Student1 from './Student1'

export default {
     
    name: 'Person',
    components: {
     
        Student1,
    },
</script>

Student1.vue

<template>
  <div>
    Student1
    {
  {name}},{
  {age}}
  </div>
</template>

<script>
export default {
     
    name: 'Student1',
    props: {
     
        name: String,