组件通信

在现代应用程序中，往往需要多个组件协同工作来实现复杂的功能和交互。以下是一些需要组件通信的主要原因：
1. 分解复杂问题
2. 数据共享
3. 父子组件交互
4. 组件复用
5. 解耦和模块化
6. 交互和用户体验

一、父传子

props：

在Vue中，可以使用props属性来实现父组件向子组件传递数据。下面是一个简单的示例，展示了在Vue中如何通过父组件向子组件传递数据：
props传递的数据通常是静态的，一旦传递给子组件，就不会自动更新。

<template>
  <div>
    <h2>父组件</h2>
    <ChildComponent :message="parentMessage" />
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: '这是父组件传递给子组件的消息'
    };
  }
};
</script>

子组件使用poprs接受

<template>
  <div>
    <h3>子组件</h3>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: ['message']
};
</script>

计算属性+ props（动态更新）

如果你需要在父组件的数据更新时，动态地更新子组件的属性，可以使用计算属性或侦听器来实现。

<template>
  <div>
    <h2>父组件</h2>
    <input type="text" v-model="message" />
    <ChildComponent :child-message="computedMessage" />
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: '这是父组件传递给子组件的消息'
    };
  },
  computed: {
    computedMessage() {
      return this.message; // 使用计算属性动态生成子组件的属性值
    }
  }
};
</script>

子组件还是props接收

<template>
  <div>
    <h3>子组件</h3>
    <p>{{ childMessage }}</p>
  </div>
</template>

<script>
export default {
  props: ['childMessage']
};
</script>

当父组件中的message属性发生变化时，computedMessage计算属性会重新计算，从而更新子组件的属性值。
需要注意的是，传递给子组件的props是只读的，子组件不能直接修改父组件传递过来的属性值。如果需要修改父组件的数据，应该通过事件来进行通信。

v-model 组件双向数据绑定

v-model指令在子组件中的默认行为是绑定一个名为value的prop属性，并侦听名为input的自定义事件。

<template>
  <div>
    <h2>父组件</h2>
    <ChildComponent v-model="message" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: '这是父组件传递给子组件的消息'
    };
  }
};
</script>

<template>
  <div>
    <h3>子组件</h3>
    <input type="text" :value="value" @input="$emit('update:value', $event.target.value)" />
  </div>
</template>

<script>
export default {
  props: ['value']
};
</script>

这样就实现了父组件和子组件之间的双向数据绑定，父组件的message会随着子组件中输入框的变化而更新。

解析原理：

v-model指令是Vue框架提供的一种语法糖，用于实现表单元素的双向数据绑定。它能够简化在父组件和子组件之间进行数据传递和同步的过程。
当使用v-model指令时，Vue会根据指令所在元素的类型自动为它绑定一个名为value的属性，并监听名为input的自定义事件。这样，在父组件中使用v-model时，实际上是将父组件的数据属性与子组件的value属性和input事件进行了绑定。
- 当在父组件中使用v-model时，例如<ChildComponent v-model="message" />，Vue会将它转换为以下代码：

<ChildComponent :value="message" @input="message = $event" />

上述代码中，message是父组件中的一个数据属性，被绑定到了子组件的value属性上。
当子组件中的输入框的值发生变化时，通过$emit('input', $event)触发了名为input的自定义事件，并将输入框的值作为参数传递给父组件，从而实现了数据的双向绑定。
在子组件中，你需要通过props声明一个名为value的属性，用于接收父组件传递的值。然后，你可以通过监听输入框的input事件，并通过$emit('input', newValue)将新的值传递给父组件，使得父组件的数据能够与子组件的输入框保持同步。

总结起来，v-model指令的原理是通过自动绑定value属性和input事件，实现父组件和子组件之间表单元素的双向数据绑定。它简化了数据传递和同步的操作，提供了一种便捷的方式来处理表单输入的数据。

props+v-model——父子双向通信

组件通信

一、父传子

props：

计算属性+ props（动态更新）

v-model 组件双向数据绑定

解析原理：