Vue子组件向父组件传值的奥秘：解读事件触发与属性传递的艺术

2023-09-07 18:17:12

子组件向父组件传值：牵线搭桥的两种方式

在Vue.js中，子组件向父组件传值是实现组件间通信的关键。就像两个独立的实体想要交换信息，子组件和父组件需要借助特定的机制来建立联系，传递数据。而这正是事件触发和属性传递所扮演的角色。

事件触发：子组件主动发声，父组件倾听回应

事件触发是一种主动的通信方式，子组件通过触发事件，将数据传递给父组件。就像子组件敲响了门铃，父组件听到铃声后，前来开门接收数据。

1. 子组件主动触发事件将数据传递给父组件

<!-- 子组件 -->
<template>
  <button @click="handleClick">传递数据</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      // 子组件触发名为"传递数据"的事件，并将数据作为参数传递
      this.$emit("传递数据", "子组件传递的数据");
    }
  }
};
</script>

<!-- 父组件 -->
<template>
  <div>
    <child-component @传递数据="handleDataReceived"></child-component>
  </div>
</template>

<script>
export default {
  methods: {
    handleDataReceived(data) {
      // 父组件收到子组件传递的数据
      console.log("父组件收到数据：", data);
    }
  }
};
</script>

属性传递：子组件静默传递，父组件默默接收

属性传递是一种隐式的通信方式，子组件通过设置属性值，将数据传递给父组件。就像子组件将数据写在纸条上，然后悄悄地塞给父组件，父组件在不知不觉中接收到了数据。

<!-- 子组件 -->
<template>
  <div>
    <input v-model="data">
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: "子组件传递的数据"
    };
  }
};
</script>

<!-- 父组件 -->
<template>
  <div>
    <child-component :data="data"></child-component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: ""
    };
  }
};
</script>