揭秘Vue.js父子组件传值的5个实用案例，轻松掌握数据交互技巧！

在Vue.js的开发过程中，父子组件之间的数据交互是构建复杂应用的关键。通过正确地传递数据，可以确保组件之间的通信流畅，提高代码的可维护性和可复用性。以下将详细介绍五个实用的Vue.js父子组件传值案例，帮助你轻松掌握数据交互技巧。

案例一：通过Props传递数据

核心思想：父组件通过props将数据传递给子组件。

代码示例：

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

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello, Child Component!'
    };
  }
}
</script>

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

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

说明：父组件通过:message="message"将数据message传递给子组件，子组件在模板中通过{{ message }}显示接收到的数据。

案例二：通过事件传递数据

核心思想：子组件通过触发事件将数据传递给父组件。

代码示例：

// 父组件
<template>
  <div>
    <child-component @update-message="handleMessage"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleMessage(newMessage) {
      this.message = newMessage;
    }
  }
}
</script>

// 子组件
<template>
  <div>
    <input v-model="inputValue" @input="updateMessage">
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    updateMessage() {
      this.$emit('update-message', this.inputValue);
    }
  }
}
</script>

说明：子组件通过$emit('update-message', this.inputValue)触发事件，并将数据传递给父组件。父组件通过监听@update-message="handleMessage"事件来接收数据。

案例三：使用Vue的自定义事件

核心思想：通过Vue的自定义事件实现组件间的通信。

代码示例：

// 父组件
<template>
  <div>
    <child-component @custom-event="handleCustomEvent"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleCustomEvent(data) {
      console.log('Custom event received:', data);
    }
  }
}
</script>

// 子组件
<template>
  <div>
    <button @click="triggerCustomEvent">Trigger Custom Event</button>
  </div>
</template>

<script>
export default {
  methods: {
    triggerCustomEvent() {
      this.$emit('custom-event', { message: 'Hello!' });
    }
  }
}
</script>

说明：子组件通过$emit('custom-event', { message: 'Hello!' })触发自定义事件，并将数据传递给父组件。父组件通过监听@custom-event="handleCustomEvent"事件来接收数据。

案例四：使用Vuex进行组件间通信

核心思想：通过Vuex进行状态管理，实现组件间的通信。

代码示例：

”`javascript // Vuex store import Vue from ‘vue’; import Vuex from ‘vuex’;

Vue.use(Vuex);

export default new Vuex.Store({ state: {

message: 'Hello, Vuex!'

}, mutations: {

updateMessage(state, newMessage) {
  state.message = newMessage;
}

} });

// 父组件

<child-component></child-component>