v-model实现父子互传数据

组件上的 v-model

1. 为什么需要在组件上使用 v-model

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

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

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

2.1 父向子

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

② 子组件中，通过 props 接收父组件传递过来的数据

2.2 子向父

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

② 在子组件中声明 emits 自定义事件，格式为 update:xxx

③ 调用 $emit() 触发自定义事件，更新父组件中的数据

3. 子父双向绑定示例代码：

app.vue代码

<template>
  <h1>app根组件{{ count }}</h1>
  <button @click="add">+1</button>
  <hr>
  <mymode v-model:mycount="count"></mymode>
</template>

<script>
import mymode from './mode.vue'

export default {
  name:'MyApp',
  data(){
    return{
      count:1
    }
  },
  components:{
    mymode
  },
  methods:{
    add() {
      this.count++
    }
  }

}
</script>

mode.vue代码

<template>
  <h2>model子组件</h2>
  count的值：{{ mycount }}
  <button @click="add">+1</button>
</template>

<script>
export default {
  name:'mymodel',
  props:['mycount'],
  emits:['update:mycount'],
  methods:{
    add() {
      this.$emit('update:mycount',this.mycount + 1)
    } 
  }
}
</script>

​

写在最后

✨个人笔记博客✨

星月前端博客

http://blog.yhxweb.top/

 ✨原创不易，还希望各位大佬支持一下
 👍 点赞，你的认可是我创作的动力！
 ⭐️ 收藏，你的青睐是我努力的方向！
 ✏️评论，你的意见是我进步的财富！

​