Moeny.vue reads the data of each component

<template> <Layout class-prefix="layout"> <NumberPad @update:value="onUpdateAmount"/> <Types :value.sync="record.type"/> <! If you want to initialize a component and get the latest value when updating, use.sync--> <! -- <Types :value="record.type" @update:value="onUpdateType"/>--> <Notes @update:value="onUpdateNotes"/> <Tags :data-source.sync="tags" @update:value="onUpdateTags"/> </Layout> </template> <script lang="ts"> import Vue from 'vue'; import NumberPad from '@/components/Money/NumberPad.vue'; import Types from '@/components/Money/Types.vue'; import Notes from '@/components/Money/Notes.vue'; import Tags from '@/components/Money/Tags.vue'; import {Component} from 'vue-property-decorator'; type Record = { tags: string[], notes: string, type: string, amount: number } @Component({ components: {Tags, Notes, Types, NumberPad}}) export default class Money extends Vue {Tags = [' clothes ', 'food ',' traffic ', 'water ',' rent ', 'cosmetics']; record: Record = { tags: [], notes: '', type: '-', amount: 0 }; onUpdateTags(value: string[]) { this.record.tags = value; } onUpdateNotes(value: string) { this.record.notes = value; } // onUpdateType(value: string) { // this.record.type = value; // } onUpdateAmount(value: string) { this.record.amount = parseFloat(value); } } </script> <style lang="scss"> .layout-content { display: flex; flex-direction: column-reverse; } </style>Copy the code

.syncThe modifier

In some cases, we may need to “bidirectional bind” a prop. Unfortunately, true bidirectional binding creates maintenance problems, because child components can change parent components with no obvious source of change on either side.

This is why we recommend replacing the schema triggering event with update:myPropName. For example, in a component that contains a title prop hypothesis, we can express the intent to assign a new value to it as follows:

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

The parent component can then listen for that event and update a local data property as needed. Such as:

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

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

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

Note that v-bind with the.sync modifier cannot be used with expressions (e.g. V-bind :title.sync= “doc.title + ‘! ‘” is invalid). Instead, you can only provide the name of the property you want to bind to, similar to the V-Model.

We can also use the.sync modifier with v-bind when setting multiple prop objects at the same time:

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

This passes each property (such as title) in the doc object as a separate prop, and then adds a separate V-on listener for updates.

Using v-bind.sync on a literal object, such as v-bind.sync= “{title: doc.title}”, does not work because there are many edge cases to consider when parsing a complex expression like this.

The use of LocalStorage

<script lang="ts"> import Vue from 'vue'; . import {Component, Watch} from 'vue-property-decorator'; Type Record = {tags: string[], notes: string, type: string, amount: number,// createdAt? // Class or constructor} @component ({components: {Tags, Notes, Types, NumberPad}}) export default class Money extends Vue {Tags = [' clothes ', 'food ',' traffic ', 'water ',' rent ', 'cosmetics']; recordList: Record[] = JSON.parse(window.localStorage.getItem('recordList') || '[]'); record: Record = { tags: [], notes: '', type: '-', amount: 0 }; onUpdateTags(value: string[]) { this.record.tags = value; } onUpdateNotes(value: string) { this.record.notes = value; } // onUpdateType(value: string) { // this.record.type = value; // } onUpdateAmount(value: string) { this.record.amount = parseFloat(value); } saveRecord() { const record2: Record = JSON.parse(JSON.stringify(this.record)); Record2.createdat = new Date(); record2.createdat = new Date(); this.recordList.push(record2); console.log(this.recordList); } @Watch('recordList') onRecordListChange() { window.localStorage.setItem('recordList', JSON.stringify(this.recordList)); } } </script>Copy the code