Vue----组件上的 v-model

---

1 组件上使用 v-model

v-model 是双向数据绑定指令，当需要维护组件内外数据的同步时，可以在组件上使用 v-model 指令。

外界数据的变化会自动同步到 counter 组件中
counter 组件中数据的变化，也会自动同步到外界

2 在组件上使用 v-model 的步骤

① 父组件通过 v-bind: 属性绑定的形式，把数据传递给子组件
② 子组件中，通过 props 接收父组件传递过来的数据

① 在 v-bind: 指令之前添加 v-model 指令
② 在子组件中声明 emits 自定义事件，格式为 update:xxx
③ 调用 $emit() 触发自定义事件，更新父组件中的数据

2.1 父组件通过 v-bind: 属性绑定的形式，把数据传递给子组件

<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 子组件中，通过 props 接收父组件传递过来的数据

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

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

<style>

</style>

2.3 在 v-bind: 指令之前添加 v-model 指令

监听子组件的数据的变化。

<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 在子组件中声明 emits 自定义事件，格式为 update:xxx

利用 emits 向父组件传值。

<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 调用 $emit() 触发自定义事件，更新父组件中的数据

<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 完整代码

Counter.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>

App.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>