Todolist case

Component writing process

1. Split static components

• Components should be split according to function points , Do not name with html Element conflict .

2. Implement dynamic components :
   Consider where the data is stored , Data is a component in use , Some components are still in use :

• A component is in use ： Just put it on the component itself .
• Some components are in use ： On their common parent component ( Status up ).

3. Implement interaction
   Start with binding events .

npm i nanoid

nanoid Is a stand-alone build id A third party library .

• install ：npm i nanoid
• introduce ：import {nanoid} from 'nanoid'
• Use : id:nanoid()

data

If two sibling components need to share one data, will data It's defined in app in , Again by app.js Transmit the data decibel to the brother components .

How to transfer the data of child components to parent components

props Apply to :

• Parent component ==> Subcomponent communication
• Child components ==> Parent component communication （ Ask the parent to give the child a function first )：
  Define a function in the parent component , With one parameter
  Take the function of the parent component as props Parameters Pass to subcomponent
  Subcomponents receive and call functions , To his own data Value is passed as a parameter to the function passed by the parent component .
  In this way, the function of the parent component can receive the value passed by the child component

v-model And props

• Use v-model Remember to : v-model Bound value cannot be props Transmitted value , Because of this props The value of will be modified
• props If the value of the object type is passed , When modifying properties in an object Vue No mistake. , But this is not recommended .

Where is the data? , The operation of data should be where

TodoList Case realization effect

The source code for ：https://github.com/Panyue-genkiyo/vue-advance/tree/master/07_src_Todolist%E6%A1%88%E4%BE%8B