Originally wanted to put a picture of the old, burn three worship, but pictures and not go up, on the front end so MMP era, every day there are so many things, B at the time of data driven, everyone praise highly is the direction of the one-way data flow, data transfer data from parent to child components, or that sentence, the B come so much to do, just be careful, The proper use of bidirectional binding is a win-win for both business and component development. Installing B is ok, but not too much!

Ok, focus, today I will tell you about VUE four kinds of two-way data transmission has those uses

Two-way communication via $ON and $emit

Use $ON (eventName) to listen for events use $emit(eventName) to emit events

This usage, in fact, is the foundation of my next three usages

If $ON triggers an event, then $ON will receive it and execute the function event. If $ON triggers an event, then $ON will execute the function event

If the sub component wants to change the props, it is not allowed to change the props. If the sub component wants to change the props, it is allowed to change the parent component

The children components

<template lang="pug">
  .demo
    .demo-example(@click="changePropsValue") {{msg}}
</template>


<script>
export default {
  props: ['msg'],
  methods: {
    changePropsValue () {
      this.$emit('changeMsg'.'Emitted via $emit')
    }
  }
}
</script>Copy the code

1. MSG is passed to props via the parent component. 2. When we click, we trigger the changeMsg event, and the second parameter is the parameter you want to pass to the parent component

The parent component

<template lang="pug">
  div
    demo(:msg="msg" v-on:changeMsg='onChange')
</template>

<script>
import Demo from './demo.vue'
export default {
  data () {
    return {
      msg: 'First data Transfer'
    }
  },
  components: {
    Demo
  },
  methods: {
    onChange (msg) {
      this.msg = msg
    }
  }
}
</script>Copy the code

$on :(colon); $on :(); $on :(colon); $on :(colon); The onChange function is executed immediately, but in essence, vUE is still a one-way data flow. Although the props cannot be changed, the data in the data can be changed. Once the data in the data is transitive to the child components, the data corresponding to the child components will change at the same time if the parent data is changed

Two. Through v-model to carry out father-son communication

When Vue moved to 2.0,.sync was removed, resulting in a bunch of component libraries that used v-Models for bidirectional binding. Essentially, V-Model scenarios were used for forms, but since they can be customized, they have their own flexibility

Official:

Custom events can be used to create custom form input components that use v-Models for two-way data binding. Input V-model =”something”

Grammar sugar looks like this

input

v-bind:value=”something”

v-on:input=”something = $event.target.value”

This illustrates the

1. The value of something in the V-model represents the value in the syntax sugar. In the form, it can be regarded as the value of the input, and in other tags, it can be regarded as the Props data to be passed. $on :input=”something = $event.target.value”; $on :input=”something = $event.target.value”; $event.target.value ($event.target.value); $event.target.value ($event.target.value)

Now the older version of the component library, when the 2.0 unsync, custom components, how smart v-model for two-way communication

The children components

<template lang="pug">
  .demo
    .demo-example(@click="changePropsValue") {{value}}
</template>


<script>
export default {
  props: ['value'],
  methods: {
    changePropsValue () {
      this.$emit('input'.$emit emitted input event)
    }
  }
}
</script>Copy the code

Vbind :value=”something” vbind :value=”something” vbind :value=”something” When we change the input field, the input event is automatically triggered. However, we can also trigger the input event manually by using $emit

The parent component

<template lang="pug">
  div
    demo(v-model ='msg')
</template>

<script>
import Demo from './demo.vue'
export default {
  data () {
    return {
      msg: 'First data Transfer'
    }
  },
  components: {
    Demo
  }
}
</script>Copy the code

We can use the V-Model to bind it like a form so that we can bind the parent component in both directions. The V-model syntax sugar encapsulates V-on :input to listen for events

3. In 2.3 regression features.sync

Sync has been changed from version 1.0 to $emit to explicitly trigger an update event.

But it is syntactically more intuitive and concise than v-Model, which is mainly used for forms and binding

Further down the line,.sync has $on listening encapsulation and is a syntactic sugar like v-model

The children components

<template lang="pug">
  .demo
    .demo-example(@click="changePropsValue") {{msg}}
</template>


<script>
export default {
  props: ['msg'],
  methods: {
    changePropsValue () {
      this.$emit('update:msg'.'Update event triggered by $emit display')
    }
  }
}
</script>Copy the code

$emit = props (); $emit = props (); update: MSG (MSG) = props ()

parent

<template lang="pug">
  div
    demo(:msg.sync="msg")
</template>

<script>
import Demo from './demo.vue'
export default {
  data () {
    return {
      msg: 'First data Transfer'
    }
  },
  components: {
    Demo
  }
}
</script>Copy the code

Sync (: MSG. Sync =” MSG “), which will be passed directly to the child component as in 1.0, will essentially be extended to a V-on listener that automatically updates the parent component’s properties. V-model is not recommended for sync.

4. $parent usage

It’s not recommended to expose props and events externally when you’re showing some operations. Parent can be used when some internal logic operation is used. It is not very complicated to conduct two-way guidance, saving code and logic, and sometimes it can also be seen at a glance

The children components

<template lang="pug">
  .demo
    .demo-example(@click="changePropsValue") Click the button </template> <script>export default {
  methods: {
    changePropsValue () {
      this.$parent.msg = 'Changed the update event explicitly by $parent'
    }
  }
}
</script>Copy the code

1. The child component displays the data in the parent component’s parent. MSG by clicking the button

parent

<template lang="pug">
  div
    demo
    p {{msg}}
</template>

<script>
import Demo from './demo.vue'
export default {
  data () {
    return {
      msg: 'First write to data'
    }
  },
  components: {
    Demo
  }
}
</script>Copy the code

In the four methods, I recommend to use. The sync to two-way communication, a quantity of denier communication mechanism deeply, the component of embedded into more than three words, I would recommend to use vuex for data sharing, otherwise one layer, then a layer of upward, to the last page you can not control, business code is not intuitive