Vue----v-modelo en componente

---

1 Usar modelo v en componentes

v-model es una directiva de enlace de datos bidireccional. Cuando necesite mantener la sincronización de los datos dentro y fuera del componente, puede usar la directiva v-model en el componente.

Los cambios en los datos externos se sincronizarán automáticamente con los
cambios en los datos del componente de contador en el componente de contador, y también se sincronizarán automáticamente con el mundo exterior.

2 pasos para usar v-model en un componente

① El componente principal pasa los datos al componente secundario en forma de v-bind: vinculación de propiedades
② En el componente secundario, los datos que se pasan del componente principal se reciben a través de props

① Agregue la instrucción v-model antes de la instrucción v-bind:
② Declare el evento personalizado emits en el componente secundario, el formato es update:xxx
③ Llame a $emit() para activar el evento personalizado y actualizar los datos en el componente principal

2.1 El componente principal pasa datos al componente secundario en forma de v-bind: vinculación de atributos

<template>
  <div>
    <h1>App 组件</h1>
    <p>App-count: {
   
   {count}}</p>
    <counter :count="count"></counter>
  </div>
</template>

<script>
import Counter from './Counter.vue'

export default {
      
      
  name: 'App',
  data() {
      
      
    return {
      
      
      count: 0
    }
  },
  components: {
      
      
    Counter
  }
}
</script>

<style>

</style>

2.2 En el componente secundario, los datos pasados ​​desde el componente principal se reciben a través de accesorios

<template>
  <div>
    <h3>Counter 组件</h3>
    <p>{
   
   {count}}</p>
  </div>
</template>

<script>
export default {
      
      
  name: 'Counter',
  props: ['count']
}
</script>

<style>

</style>

2.3 Agregue la directiva v-model antes de la directiva v-bind:

Escuche los cambios en los datos de los componentes secundarios.

<template>
  <div>
    <h1>App 组件</h1>
    <p>App-count: {
   
   {count}}</p>
    <counter v-model:count="count"></counter>
  </div>
</template>

<script>
import Counter from './Counter.vue'

export default {
      
      
  name: 'App',
  data() {
      
      
    return {
      
      
      count: 0
    }
  },
  components: {
      
      
    Counter
  }
}
</script>

<style>

</style>

2.4 Declare el evento personalizado emits en el subcomponente, el formato es update:xxx

Use emits para pasar valores a los componentes principales.

<template>
  <div>
    <h3>Counter 组件</h3>
    <p>{
   
   {count}}</p>
    <button @click="sub"> -1 </button>
  </div>
</template>

<script>
export default {
      
      
  name: 'Counter',
  props: ['count'],
  emits: ['update:count']
  }
}
</script>

<style>

</style>

2.5 Llame a $emit() para activar un evento personalizado y actualizar los datos en el componente principal

<template>
  <div>
    <h3>Counter 组件</h3>
    <p>{
   
   {count}}</p>
    <button @click="sub"> -1 </button>
  </div>
</template>

<script>
export default {
      
      
  name: 'Counter',
  props: ['count'],
  emits: ['update:count'],
  methods: {
      
      
    sub() {
      
      
      this.$emit( 'update:count', this.count-1 )
    }
  }
}
</script>

<style>

</style>

2.6 Código completo

Contador.vue

<template>
  <div>
    <h3>Counter 组件</h3>
    <p>{
   
   {count}}</p>
    <button @click="sub"> -1 </button>
  </div>
</template>

<script>
export default {
      
      
  name: 'Counter',
  props: ['count'],
  emits: ['update:count'],
  methods: {
      
      
    sub() {
      
      
      this.$emit( 'update:count', this.count-1 )
    }
  }
}
</script>

<style>

</style>

aplicación.vue

<template>
  <div>
    <h1>App 组件</h1>
    <p>App-count: {
   
   {count}}</p>
    <button @click="add"> +1 </button>
    <counter v-model:count="count"></counter>
  </div>
</template>

<script>
import Counter from './Counter.vue'

export default {
      
      
  name: 'App',
  data() {
      
      
    return {
      
      
      count: 0
    }
  },
  methods: {
      
      
    add() {
      
      
      this.count++
    }
  },
  components: {
      
      
    Counter
  }
}
</script>

<style>

</style>