Vue subcomponents and data delivery issues and precautions

When facing the complex logic of a single component and needs to be split, it is inevitable to encounter the problem of data transfer between parent and child components. So let’s understand what conventions need to be followed when passing data between parent and child components, and what issues to pay attention to.

How to pass

When passing the parent component to the child component, it uses the prop feature for passing.

Agree

As the old rules, before using it, we first understand how to use it and what constraints are there:

• The variable name to be passed in the props of the child component
• Naming specifications for variable names and components
• When passing values ​​from the parent component, you need to use short horizontal lines to separate naming.
• Use v-bind to pass values

definition

First define it in the child component:

//

export default {
  name: 'child'
  props: ['teamList']
}

Camel naming is used here. When passing values, you need to pay attention to converting them into short horizontal line-separated naming.

We have defined a teamList variable, and at this time we can use this variable in this component (same as data in data).

Pass the value

Passing values ​​in the parent component:

<template>
  <div>
    <child v-bind:teamList="teamList"></child>
  </div>
</template>

Used in parent component v-bindYou can pass the data.

Passing data to subcomponents is that simple, essentially like data, except that we use the prop feature alone to distinguish it.

When you need to pay attention to:

The array passed through the prop feature is "one-way" bound, and the update of the array by the parent component will affect the child component. Therefore, it is not recommended that subcomponents modify the values ​​in the prop feature

References in Js when passing objects and arrays! Therefore: When the child component modifies the object/array passed by the parent component, it will affect the state in the parent component

This feature has its pros and cons, and in some cases it can be handled in this hack-like way.

Backward delivery of subcomponents

As mentioned above, it is not recommended to modify the data in props in the child components. So what should I do when I need to give some kind of feedback to the parent component?

Suppose we now have a component with a login pop-up box called through the child component. How should we notify the parent component to react accordingly when we log in successfully?

1. Through custom events, the child component calls this.$emit('event name', parameter)
2. Use v-model, model options in the component and input events to simulate an input control to update the values ​​in the parent component.
3. .sync modifier for "two-way binding"

Only the first method is introduced here, because Ruoyu has not used the latter two methods a few times o(╯□╰)o

emit usage convention

• Event name naming specifications and components
• When the parent component binds custom events on the child component, it must exactly match the event name. Here, it is not the short horizontal line-separated naming used when used in the child component, but exactly matches.

There are fewer conventions, mainly pay attention to the fact that it is different from the component when used, and the names need to be exactly matched.

emit use

First, we define events in the child component. It is better to say they are calls than to say they are definitions. Because it is a subcomponent called emit directly in a certain piece of logic:

//

export default {
  methods: {
    submit() {
      this.$emit('submitForm', )
    }
  }
}

Here we define the custom event name of the call submitForm, so use it in the parent component:

<!--  -->

<template>
  <div>
    <child v-on:submitForm="submit"></child>
  </div>
</template>
<script>
export default {
  methods: {
    submit(data) {
      // Processing logic    }
  }
}
</script>

You can see that when used here, the event name of v-on bound is submitForm instead of submit-form.

This needs attention.

Write it later

The above are the Vue subcomponents and data transmission issues and precautions introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!
If you think this article is helpful to you, please reprint it. Please indicate the source, thank you!