Implementation method of adjacent component value transfer function in Vue document

Vue, as a popular front-end framework, often needs to implement value transfer functions between components. Among them, when the values ​​of adjacent components are transferred, it is mainly realized by calling the component's method. This article will introduce the implementation method of adjacent component value transfer function in Vue.

1. Parent component passes value to child component

In Vue, the value of the parent component is bound to the child component through the v-bind directive. The specific implementation code is as follows:

In the parent component:

<template>
  <div>
    <child-component v-bind:data="parentData"></child-component>
  </div>
</template>

<script>
import childComponent from './childComponent.vue';
export default {
  components: {
    childComponent
  },
  data: {
    parentData: 'Hello, Vue!'
  }
}
</script>

In the child component:

<template>
  <div>
    <p>{{data}}</p>
  </div>
</template>

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

The above code passes the data of the parent component parentData v-bind:data Bind to the data attribute of the child component.

2. The child component passes the value to the parent component

In Vue, the child component needs to send an event to the parent component through the $emit method. Register the event in the parent component and process the data sent by the child component in the callback function. The specific implementation code is as follows:

In the parent component:

<template>
  <div>
    <child-component v-on:send-data="handleChildData"></child-component>
  </div>
</template>

<script>
import childComponent from './childComponent.vue';
export default {
  components: {
    childComponent
  },
  methods: {
    handleChildData(data) {
      console.log(data);
    }
  }
}
</script>

In the child component:

<template>
  <div>
    <button v-on:click="sendDataToParent">向父组件传递数据</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendDataToParent() {
      this.$emit('send-data', 'Hello, Parent!');
    }
  }
}
</script>

In the above code, the child component passes v-on:click Bind the sendDataToParent method, in the method send the event to the parent component through the $emit method send-data and pass the data Hello, Parent ! . In the parent component, register the callback function handleChildData of the event send-data through v-on:send-data, and process the return of the child component in the function parameters.

3. Transferring values ​​between sibling components

When transferring data between sibling components, the parent component needs to be used as an intermediate bridge. The specific implementation code is as follows:

In the parent component:

<template>
  <div>
    <brother-component1 v-on:update-data="handleBrotherData"></brother-component1>
    <br>
    <brother-component2 v-bind:data="parentData"></brother-component2>
  </div>
</template>

<script>
import brotherComponent1 from './brotherComponent1.vue';
import brotherComponent2 from './brotherComponent2.vue';
export default {
  components: {
    brotherComponent1,
    brotherComponent2
  },
  data: {
    parentData: ''
  },
  methods: {
    handleBrotherData(data) {
      this.parentData = data;
    }
  }
}
</script>

In the subcomponent 1:

<template>
  <div>
    <button v-on:click="sendDataToBrother">向兄弟组件2传递数据</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendDataToBrother() {
      this.$emit('update-data', 'Hello, Brother 2!');
    }
  }
}
</script>

In the subcomponent 2:

<template>
  <div>
    <p>{{data}}</p>
  </div>
</template>

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

Above In the code, child component 1 sends the event update-data to the parent component and passes the data Hello, Brother 2!; the parent component listens to the event v-on:update- data and process the data handleBrotherData in the function, and bind the processed data to the data of subcomponent 2 through v-bind:data in properties.

To sum up, the implementation method of value-passing functions of adjacent components in Vue is mainly completed through value binding and event communication between parent and child components. The parent component serves as an intermediate bridge between sibling components. This method is simple, easy to understand, flexible and convenient, and is a very important component communication method in Vue.

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