父子通信以及Props的使用

在 Vue 中，父子组件通信 是指父组件和子组件之间如何传递数据。Vue 提供了几种方式来实现父子组件之间的通信，其中 父向子通信 是最常用的一种。

父向子通信

父向子通信的方式是通过 props （属性）来实现的。父组件将数据传递给子组件，子组件通过 props 接收这些数据。

1. 父组件传递数据给子组件

父组件通过在子组件标签上绑定 props 来传递数据给子组件。子组件通过 props 接收这些数据，并在模板中进行渲染。

示例：

父组件（App.vue）

<template>
  <div>
    <h1>{{ message }}</h1>
    <!-- 向子组件传递 message -->
    <MyButton :label="message" />
  </div>
</template>

<script>
import MyButton from './components/MyButton.vue';

export default {
  components: {
    MyButton
  },
  data() {
    return {
      message: 'Click Me'
    };
  }
};
</script>

子组件（MyButton.vue）

<template>
  <button>{{ label }}</button>
</template>

<script>
export default {
  // 接收父组件传递的 prop
  props: ['label']
};
</script>

解释：

1. 父组件（App.vue） ：
   • 在 data 中定义了一个 message 属性，内容是 'Click Me'。
   • 在模板中，使用 :label="message" 绑定 message 数据，将其传递给子组件 MyButton。
2. 子组件（MyButton.vue） ：
   • 子组件通过 props 接收父组件传递的数据。这里定义了一个名为 label 的 prop。
   • 在模板中，使用 {``{ label }} 渲染父组件传递过来的数据。

2. 父向子通信的注意事项

• 只读性 ：props 是单向数据流的，意味着子组件不能直接修改父组件传递的 props 数据。如果需要在子组件中修改这些数据，应通过 事件 或 v-model 进行通信。

• 默认值 ：你可以在子组件中为 props 设置默认值或类型验证，防止父组件没有传递数据时引发错误。

示例：设置默认值

props: {
  label: {
    type: String,
    default: 'Default Label'  // 如果父组件没有传递 label，子组件会使用默认值
  }
}

示例：设置类型验证

props: {
  label: {
    type: String,
    required: true  // 确保父组件传递了该属性
  }
}

3. 父组件向子组件传递复杂数据

父组件不仅可以传递简单的数据（如字符串、数字），还可以传递对象、数组、函数等复杂类型的数据。

例子：传递对象数据

<!-- 父组件 -->
<template>
  <div>
    <MyButton :info="buttonInfo" />
  </div>
</template>

<script>
import MyButton from './components/MyButton.vue';

export default {
  components: {
    MyButton
  },
  data() {
    return {
      buttonInfo: {
        label: 'Click Me',
        color: 'blue'
      }
    };
  }
};
</script>

<!-- 子组件 -->
<template>
  <button :style="{ backgroundColor: info.color }">{{ info.label }}</button>
</template>

<script>
export default {
  props: {
    info: {
      type: Object,
      required: true
    }
  }
};
</script>

解释

事件机制

在 Vue 中，子组件可以通过 $emit 方法触发自定义事件，将数据传递给父组件。这个机制类似于浏览器的事件系统：子组件触发某个事件，父组件监听并响应。

• $emit ：用于在子组件中触发自定义事件，并且可以传递参数（如 'i am mt'）。
• 事件名（'changeTitle'）：这是你自定义的事件名称，父组件可以监听这个事件来做相应处理。

@changeTitle="updateTitle" @changeTitle

@changeTitle="updateTitle" 是 Vue 的 事件绑定 语法，用于监听子组件触发的 changeTitle 事件，并调用父组件中的 updateTitle 方法来处理该事件。

解析 @changeTitle="updateTitle"

1. @changeTitle ：这部分表示监听子组件触发的 changeTitle 事件。@ 是 Vue 的 事件绑定的缩写 ，它等价于 v-on:changeTitle，用于在父组件中监听子组件发出的事件。

   • @changeTitle：表示监听事件名称为 changeTitle 的事件。
   • 在子组件中，$emit('changeTitle', ...) 触发的事件名就是 'changeTitle'。

2. "updateTitle" ：这是当 changeTitle 事件被触发时，父组件需要调用的 方法名。这个方法会在事件发生时被调用，父组件会传递来自子组件的数据（如果有的话）到这个方法。

@changeTitle 是监听名字是changeTitle 的事件吗 可是父类里面没定义这个事件 是子传过来的？

@changeTitle 确实是监听一个名为 changeTitle 的事件，但父组件并不需要显式地定义这个事件。事件的定义和触发发生在子组件中，父组件只是监听并处理这个事件。

关键点

• 子组件 通过 $emit('changeTitle', ...) 触发 changeTitle 事件，并将数据传递给父组件。
• 父组件 使用 @changeTitle="updateTitle" 来监听子组件发出的 changeTitle 事件。
• 在父组件中并不需要显式地定义 changeTitle 事件，而是动态地监听子组件通过 $emit 发出的事件。

事件的流向

1. 子组件触发事件 ： 子组件通过 this.$emit('changeTitle', 'some data') 触发一个名为 changeTitle 的事件，并可以传递数据（如 'some data'）给父组件。

2. 父组件监听事件 ： 父组件使用 @changeTitle="updateTitle" 来监听子组件发出的 changeTitle 事件。当子组件触发该事件时，父组件会调用 updateTitle 方法，并将事件中传递的数据传给它。