18. (vue3.x+vite) v-model, the communication method between components

Front-end technology community general directory (please check this blog before subscribing)

Example effect

v-model

In vue2, v-model was responsible for the two-way binding of data. After Vue3, v-model also ushered in new changes, that is, it can realize component communication.
(1) v-model instruction: collect form data, data two-way binding
(2) v-model can also realize communication between components, and realize the business of data synchronization of parent and child components
(3) Father gives data props to child components
(4) The child component gives the parent component data a custom event $emit

Parent component code

<template>
  <div>
    <p>父组件钱数目