Detailed Explanation and Examples of Vue 2 Common Components Passing Values

In Vue 2, passing data between components is a common requirement. This blog will introduce in detail how to implement value transfer between components in Vue 2, and demonstrate how to transfer data with pictures through examples.

The basic concept of component passing value

In Vue 2, parent components can pass data to child components through the props property. Child components receive this data via props and can use it in their own templates.

Pass value from parent component to child component

First, we need to create a parent component, let's say its name is ParentComponent. In this component we will define the data to be passed to the child components.

<template>
  <div>
    <h2>父组件</h2>
    <ChildComponent :message="message" :imageSrc="imageSrc" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      message: 'Hello, 子组件!',
      imageSrc: require('@/assets/image.jpg'), // 假设图片位于 assets 文件夹下
    };
  },
};
</script>

In the above code, we consume :messageand :imageSrcpass data to child components. messageis a value of type string, and imageSrcis the path of an image resource.

Next, we need to create a child component ChildComponentand receive the value passed from the parent component in it.

<template>
  <div>
    <h3>子组件</h3>
    <p>{
   
   { message }}</p>
    <img :src="imageSrc" alt="图片" />
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true,
    },
    imageSrc: {
      type: String,
      required: true,
    },
  },
};
</script>

In child components, we use propsprops to declare received properties and display them in the template. In the above code, messageand imageSrcare declared as props, specifying their type and whether they are required, respectively.

messageNow, when we change the value of and in the parent component imageSrc, the child component will update accordingly.

demo

Now, let's include the parent component in the main file and render it:

<template>
  <div id="app">
    <ParentComponent />
  </div>
</template>

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

export default {
  components: {
    ParentComponent,
  },
};
</script>

In this way, we have completed a simple example of Vue 2 component value passing, which contains a parent component and child component with a picture. Through :messageand :imageSrc, the parent component passes data to the child component and displays it in the child component.

Child component sends events to parent component

Child components can send data or messages to parent components by triggering custom events. The parent component can listen to these events and get the data in the corresponding processing function. For example:

// Child.vue
<template>
  <div>
    <button @click="sendMessage">Send Message</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message-sent', 'Hello from child');
    }
  }
};
</script>

// Parent.vue
<template>
  <div>
    <Child @message-sent="handleMessage" />
  </div>
</template>

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

export default {
  components: {
    Child
  },
  methods: {
    handleMessage(message) {
      console.log(message);
    }
  }
};
</script>

Communicate using an event bus

If you have multiple components in your application that need to communicate, you can use Vue's event bus to manage the communication. By creating an empty Vue instance as an event bus, and then using the ���� and emit and on methods in each component to trigger and listen to events. This method is suitable for communication between components that are not parent-child relationships. For example:

// EventBus.js
import Vue from 'vue';
export default new Vue();

// Child1.vue
<template>
  <div>
    <button @click="sendMessage">Send Message</button>
  </div>
</template>

<script>
import EventBus from './EventBus.js';

export default {
  methods: {
    sendMessage() {
      EventBus.$emit('message-sent', 'Hello from child1');
    }
  }
};
</script>

// Child2.vue
<template>
  <div>
    <p>{
   
   { message }}</p>
  </div>
</template>

<script>
import EventBus from './EventBus.js';

export default {
  data() {
    return {
      message: ''
    };
  },
  created() {
    EventBus.$on('message-sent', (message) => {
      this.message = message;
    });
  }
};
</script>

Summarize

This blog introduces the basic concept of value transfer between components in Vue 2, and demonstrates the transfer of data with pictures from parent components to child components through examples. In actual development, you can extend and modify the above sample code as needed. I hope this article is helpful for understanding the value passing of Vue 2 components!