vue组件通信简明笔记：父传子

在实际项目的开发过程中，通常需要多个组件协同工作来实现复杂的功能和交互。

做简明笔记如下：
这里不包括vuex

1 、父传子(props静态)

• 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> 

2、父传子(计算属性+ 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> 

3、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会随着子组件中输入框的变化而更新。

实现原理：

1. v-model本质上就是一个语法糖，用于实现表单元素的双向数据绑定，它能够简化在父组件和子组件之间进行数据传递和同步的过程，简单理解代码：

<input v-model="test">

本质上是：

<input :value="test" @input="test = $event.target.value">

2. 当使用v-model指令时，Vue会根据指令所在元素的类型自动为它绑定一个名为value的属性，并监听名为input的自定义事件。这样，在父组件中使用v-model时，实际上是将父组件的数据属性与子组件的value属性和input事件进行了绑定。
3. 也就是说，当在父组件中使用v-model时，例如<ChildComponent v-model="message" />，Vue会将它转换为以下代码：

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

4. 当子组件中的输入框的值发生变化时，通过$emit('input', $event)触发了父组件名为input的自定义事件，并将输入框的值作为参数传递给父组件，从而实现了数据的双向绑定。

5. 在子组件中，你需要通过props声明一个名为value的属性，用于接收父组件传递的值。然后，你可以通过监听输入框的input事件，并通过$emit('input', newValue)将新的值传递给父组件，使得父组件的数据能够与子组件的输入框保持同步。

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