Detailed explanation of value transfer between VUE components

One-way value transfer method:

props：

All props form a one-way downward binding between their parent and child props : updates from the parent prop will flow downward to the child component, but not vice versa. This will prevent the child component from accidentally changing the state of the parent component, making the data flow of your application difficult to understand.

In addition, every time the parent component is updated, all props in the child component will be refreshed to the latest values. This means you should not change props inside a child component. If you do this, Vue will issue a warning in the browser's console.

Note that in JavaScript objects and arrays are passed in by reference, so for an array or object type prop, changing the object or array itself in the child component will affect the state of the parent component.

type Can be one of the following native constructors:

Event name:

  <default-component @defaultEvent = "a" />

The component default-component can pass the value to the parent component through this.$emit("defaultEvent",obj).

• String
• Number
• Boolean
• Array
• Object
• Date
• Function
• Symbol

Two-way binding value transfer method:

2.2.0+ added v-model

By default a component  v-model will make use of  value a prop called and  input an event called , but input controls such as radio buttons, checkboxes, etc. may  value make use of attributes. model Options can be used to avoid such conflicts:

Vue.component('base-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean
  },
  template: `
    <input
      type="checkbox"
      v-bind:checked="checked"
      v-on:change="$emit('change', $event.target.checked)"
    >
  `
})

Now when used on this component  v-model :

<base-checkbox v-model="lovingVue"></base-checkbox>

lovingVue The value  here  will be passed into the checked prop named. At the same time, when  <base-checkbox> an  change event is triggered with a new value, this  lovingVue property will be updated.

Note that you still need to  props declare  checked this prop in the component's options.

2.3.0+ added .sync modifier

In some cases, we may need to perform "two-way binding" on a prop. Unfortunately, true two-way binding creates maintenance problems because child components can modify their parent components with no obvious source of change in either parent or child components.

This is why we recommend  update:myPropName triggering events instead. For example, in a  title component that contains a prop's hypothesis, we can express the intention to assign a new value to it using the following method:

this.$emit('update:title', newTitle)

The parent component can then listen to that event and update a local data property as needed. For example:

<text-document
  v-bind:title="doc.title"
  v-on:update:title="doc.title = $event"
></text-document>

For convenience, we provide an abbreviation for this pattern,  .sync the modifier:

<text-document v-bind:title.sync="doc.title"></text-document>

Note that  .sync modifiers  v-bind cannot be used with expressions (i.e.  v-bind:title.sync=”doc.title + ‘!’” are invalid). Instead, you can only provide the name of the property you want to bind, something like this  v-model.

When we use an object to set multiple props at the same time, we can also use this  .sync modifier with  v-bind :

<text-document v-bind.sync="doc"></text-document>

This will  pass doc each property (such as  title) in the object as an independent prop, and then add  v-on a listener for update.

Will be  v-bind.sync used on a literal object, for example  v-bind.sync=”{ title: doc.title }”, will not work properly, because there are many edge cases to consider when parsing a complex expression like this.

Of course, as mentioned above, there is a kind of reference transfer in props value transfer. When the props value transfer type is a numeric value or an object, the value of the object in props can be changed in the child component, and the parent component will also change, but this has certain risks. 

Parent chain and child component index

This method is not recommended for calling data between components.

vuex

Component data communication using state management

Central event bus

In Vue. 2.x, it is recommended to use an empty Vue instance as the central event bus (bus). Component A passes the value to component B. At this time, the middleware of the bus bus is needed. Component A bus.$emit("bfun", "aa"), to send data aa like this, component B needs to pass bus.$on("bfun", function(message){console.log(message)});