There are many ways for the vUE component to communicate data. In this article, we will focus on the PROPS /$emit syntax and the V-model /.sync syntax.

TL; DR

  • Props /$emit is the most common way for parent and child components to communicate, with V-model and.sync just syntactic sugar
  • The child component simply modifies the value of a parent component that the form class component usesv-modelSyntactic sugar
  • A child component simply modifies the value of a parent component that is not used by a form class componentsyncSyntactic sugar
  • Complex logic and honestyprops/$emit

In fact, syntactic sugar is more convenient when the parent component is used, and the child component should be used as it should be.

props/$emit

If a child component wants to display the parent component’s data, props. If a child component wants to change the parent component’s data, use $emit.

Points to note:

  • The names of the properties defined in the child component props correspond to those defined in the parent component. Note that the parent component uses the shish kebab format for the properties
  • The listening event name of the parent component must be the same as the triggering event name of the child component
  • When a child component fires an event, it passes an argument that the parent component can use$eventreceive

V – model syntactic sugar

V-model is the syntactic sugar for the attribute value and event input.

When there is no grammar sugar, write like this

With v-Model, the parent component has fewer listening events and is easier to use

V-model syntactic sugar has its limitations:

  • Applies to: The triggering event returns the same value that the property is changing, usually a single property. For example, the value returned by the trigger event is the new value of the title
  • More logic, it doesn’t apply
  • Better for: components of a form class, since properties and events default tovalueandinput

Of course, you can change the default properties of the V-Model in certain cases, but the readability is not very good.

export default {
  name:'ListItem'.model: {prop:'title'.input:'changeTitle'}}Copy the code

The sync syntactic sugar

The.sync syntactic sugar, which also applies to triggering events that return the same value as the property to be changed, is more readable and can be used with components that are not form classes. The.sync syntax sugar defaults to the property XXX and the event update: XXX

When there is no grammar sugar, write like this

With.sync, the parent component still listens for fewer events and is easier to use

Sync syntactic sugar has its limitations:

  • Applies to: The triggering event returns the same value that the property is changing, usually a single property. For example, the value returned by the trigger event is the new value of the title
  • More logic, it doesn’t apply
  • Better for: components that are not form classes

conclusion

  • Props /$emit is the most common way for parent and child components to communicate, with V-model and.sync just syntactic sugar
  • The child component simply modifies the value of a parent component that the form class component usesv-modelSyntactic sugar
  • A child component simply modifies the value of a parent component that is not used by a form class componentsyncSyntactic sugar
  • Complex logic and honestyprops/$emit

In fact, syntactic sugar is more convenient when the parent component is used, and the child component should be used as it should be.

code

Props / $emit code

List.vue

<template lang="pug"> //- parent component div //- item is the data passed to ListItem, attribute is info //- clickLike, List-item (v-for="(item,index) in list" :key="index" :info="item" v-on:clickLike="change(item,$event)") </template> <script> import ListItem from "@/components/ListItem"; Export default {name: "List", Components: {ListItem}, data() {return {List: [{title: "vue3 comes ", collectworks: 20}, {title: "Pity comes ", collectworks: 2000}]}; }, the methods: {/ / when clickLike event happens, implement this method / / the event here is to get the value of the ListItem change (item, event) {item. Collects = event; }}}; </script>Copy the code

DetailItem.vue

< Template lang="pug"> //- Subcomponent div h2 {{info.title}} SPAN Likes number {{info.collectworks}} div button(@click="addCollect") likes HR </template> <script> export default {name: "ListItem", props: {// () => ({}) } }, methods: AddCollect () {// trigger the clickLike time of this component and pass a value to the parent component this.$emit("clickLike", this.info.separate + 1); }}}; </script>Copy the code

V – the model code

There is no code to abbreviate

<template lang="pug"> //- Parent component div list-item(:value="title" V-on :input="change") </template> <script> import ListItem from "@/components/ListItem"; Export default {name: "List", components: {ListItem}, data() {return {title: ""}; }, methods: {// When a clickLike event occurs, execute this method. }}}; </script>Copy the code
<template lang="pug"> //- sub component div {{value}} button(@click="changeTitle") name: "ListItem", props: { value: { type: String, default: "" } }, methods: {changeTitle() {this.$emit("input", "changeTitle "); }}}; </script>Copy the code

The parent component code when abbreviated

<template lang="pug"> //- Parent component div list-item(V-model ="title") </template> <script> import ListItem from "@/components/ListItem"; Export default {name: "List", components: {ListItem}, data() {return {title: ""}; }}; </script>Copy the code

The sync code

When there is no shorthand

<template lang="pug"> //- Parent component div list-item(:theme="title" V-ON :update:theme="change") </template> <script> import ListItem from "@/components/ListItem"; Export default {name: "List", components: {ListItem}, data() {return {title: ""}; }, methods: {// When a clickLike event occurs, execute this method. }}}; </script>Copy the code
<template lang="pug"> //- sub component div {{theme}} button(@click="changeTitle") {/template> <script> export default { name: "ListItem", props: { theme: { type: String, default: "" } }, methods: {changeTitle() {this.$emit("update:theme", "changeTitle "); }}}; </script>Copy the code

When abbreviated, the parent component code

<template lang="pug"> //- parent component div //- list-item(:theme="title" V-ON :update:theme="change") list-item(:theme.sync="title") </template> <script> import ListItem from "@/components/ListItem"; Export default {name: "List", components: {ListItem}, data() {return {title: ""}; } // methods: {// // when a clickLike event occurs, execute the method // // where event is ListItem. //} //}}; </script>Copy the code