Analysis of component value transfer examples in Vue documents

In Vue development, communication between components is a very important part. Passing data allows components to work better together and improves the reusability and composability of code between components. In the process of transferring values ​​between components, due to the very flexible nature of Vue, there are many ways to transfer data between components.

This article will introduce the common component value transfer methods in Vue, and demonstrate their usage through an example.

1. Props property value transfer
   In Vue, parent components can pass data downward to child components through props. The child component receives the value passed by the parent component by setting the props option. Props can be any type of value, including primitive types, objects, or arrays.

First, we create a parent component, named parent.vue, the code is as follows:

<template>
  <div>
    <h2 id="父组件">父组件</h2>
    <p>我是父组件的信息：{{parentInfo}}</p>
    <child :childInfo="parentInfo"></child>
  </div>
</template>

<script>
import Child from './child.vue'
export default {
  name: 'Parent',
  components: {
    Child
  },
  data() {
    return {
      parentInfo: '我是来自父组件的信息'
    }
  }
}
</script>

Then we create a child component, the content of the child component is:

<template>
  <div>
    <h2 id="子组件">子组件</h2>
    <p>我是子组件的信息: {{childInfo}}</p>
  </div>
</template>

<script>
export default {
  name: 'Child',
  props: ['childInfo']
}
</script>

In the parent component, we pass data by passing the parent component's information to the childInfo attribute of the child component. In the parent component, I use the data of the parent component to render my own information and also pass it to the child component.

In the child component, we use the props option to receive data from the parent component. Child components render their own information by using childInfo, and the childInfo value comes from the parent component.

In the above code, we use props to pass data, and use props in child components to receive data. Communication between components in this way enables data sharing between components, and the data status between components can be managed in a single way.

2. $emit and $on methods pass values

In Vue, we can also use the emit method and on method for component communication. The emit method is used to send messages, and the on method is used to receive messages. This method is usually used between components that are not parent-child relationships.

First, we create a vue instance, named event.vue, the code is as follows:

<template>
  <div>
    <h2 id="组件间事件通信示例">组件间事件通信示例</h2>
    <child></child>
    <grand-child></grand-child>
  </div>
</template>

<script>
import Vue from 'vue'
import Child from './child.vue'
import GrandChild from './grandChild.vue'

export default {
  name: 'Event',
  components: {
    Child,
    GrandChild
  },
  created() {
    //使用$on监听来自子组件的事件
    this.$on('sendMsg', function(message) {
      console.log('父组件接收到来自子组件的消息：' + message)
    })
  }
}
</script>

We listen for the arrival of events through the $on method in the parent component, and after receiving Print a message after the event. The specific use is implemented in the created declaration cycle hook function.

Then, let’s look at the code implementation of the subcomponent:

<template>
  <div>
    <h3 id="子组件">子组件</h3>
    <button @click="handleClick">发送消息</button>
  </div>
</template>

<script>
export default {
  name: 'Child',
  methods: {
    handleClick() {
      //使用$emit发送事件
      this.$emit('sendMsg', '我是来自子组件的信息')
    }
  }
}
</script>

In this way, when the button is clicked in the subcomponent, the $emit method will be triggered and the event name "sendMsg" will be used to send the parent The component sends the message "I am a message from the child component", and the parent component can listen to the arrival of the event through the $on method and complete the corresponding operation.

Similarly, we can also implement communication between any two components that are not parent-child relationships. This method makes the component's triggering events and listening events loosely coupled. By using the emit and on methods, more flexible component communication can be achieved.

To sum up, communication between components is also a very important part of Vue development. Proficiency in various value-passing methods is the basis for component writing. Through specific code examples, this article introduces two common value-passing methods in Vue: props value-passing and $emit/$on value-passing. These methods can effectively coordinate communication between components and improve code reusability and composability.

The above is the detailed content of Analysis of component value transfer examples in Vue documents. For more information, please follow other related articles on the PHP Chinese website!