Implementation method of component parent-child value transfer function in Vue document

Vue is a popular JavaScript framework. Its component development can help us improve the degree of modularity when developing complex applications and improve the maintainability and scalability of the code. In Vue, data transfer between components is a very common requirement, and the most common scenario is data transfer between parent and child components. In order to implement this kind of data transfer in Vue, we need to understand the implementation method of value transfer between parent and child components.

In Vue components, a parent component can have multiple child components at the same time. The parent component can pass data to the child components. These data can be the data of the parent component or the return of the function of the parent component calling the child component. value. Specifically, in Vue, there are several ways to implement component parent-child value transfer:

1. Props transfer data
   In Vue, we can declare the props attribute in the child component, and then Data is passed from the parent component to the child component in the form of properties. Child components can receive this data using properties declared in the props attribute.

Sample code:

Parent component:

<template>
  <div>
    <child-component :msg="helloWorld"></child-component>
  </div>
</template>

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

  export default {
    data() {
      return {
        helloWorld: 'Hello World!'
      }
    },
    components: {
      ChildComponent
    }
  }
</script>

Child component:

<template>
  <div>
    {{msg}}
  </div>
</template>

<script>
  export default {
    props: {
      msg: String
    }
  }
</script>

In this example, we declared in the child component A props attribute, its name is msg and its type is String. When using a child component in a parent component, we use the v-bind directive to bind the helloWorld attribute in the parent component to the msg attribute of the child component.

2. The child component passes data to the parent component through the $emit event
   In Vue, we can pass data to the parent component by triggering events. The child component can trigger a custom event by calling the $emit function, and the data that needs to be passed can be passed to the parent component as event parameters.

Sample code:

Parent component:

<template>
  <div>
    <child-component @message-sent="showMessage"></child-component>
  </div>
</template>

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

  export default {
    methods: {
      showMessage(msg) {
        console.log(msg)
      }
    },
    components: {
      ChildComponent
    }
  }
</script>

Child component:

<template>
  <div>
    <button @click="sendMessage">Click Me</button>
  </div>
</template>

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

In this example, we add to the child component A button. When the button is clicked, the child component calls the sendMessage function, triggers a custom event named message-sent, and passes the parameter 'Hello World!' to the parent component.

3. Get the subcomponent instance through the ref attribute
   In Vue, we can get the instance of the subcomponent by adding the ref attribute to it, and then directly call the methods and properties on this instance.

Sample code:

Parent component:

<template>
  <div>
    <button @click="showMessage">Click Me</button>
    <child-component ref="child"></child-component>
  </div>
</template>

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

  export default {
    methods: {
      showMessage() {
        console.log(this.$refs.child.message)
      }
    },
    components: {
      ChildComponent
    }
  }
</script>

Child component:

<template>
  <div>
    {{message}}
  </div>
</template>

<script>
  export default {
    data() {
      return {
        message: 'Hello World!'
      }
    }
  }
</script>

In this example, we define in the child component A data attribute message, and the instance of the child component is obtained through the ref attribute in the parent component. When the button is clicked, the parent component obtains the instance of the child component through this.$refs.child, and then directly accesses the message property on it.

Summary:
The above are some common ways to implement component parent-child value transfer in Vue. Among them, Props is the most commonly used method of transmitting data. It can make the data transfer type between components clear and has better readability and maintainability; while the method of transmitting data to the parent component through the $emit event is applicable It is suitable for scenarios where operations or data need to be performed within sub-components but cannot be achieved through props. The method of obtaining sub-component instances through ref attributes is suitable for situations where the parent component needs to directly operate sub-component data or functions.

The above is the detailed content of Implementation method of component parent-child value transfer function in Vue document. For more information, please follow other related articles on the PHP Chinese website!