巧妙的使用v-model实现父子组件之间动态传值

很多情况下我们都会遇到父子组件数据双向绑定的问题 既子组件中的数据发生变化 父组件的数据也要进行变化 父组件中的数据发生变化 子组件也要跟着变化 我们或许有很多方法实现 如$refs之类的 但总感觉这样的代码不够优雅 这个时候我们想到v-model

熟悉v-model的双向绑定原理 我们就可以用这一原理去实现父子组件之间动态传值了

原理如下:

• 父组件通过v-model绑定一个变量传给子组件
• 子组件通过props{value:{type:数据类型,defauult:默认值}} 接收
• 子组件通过$emit(‘input’,传给父组件绑定变量的值) 去改变父组件中v-model绑定的变量


v-model

在内部为不同的输入元素使用不同的 property 并抛出不同的事件：

• text 和 textarea 元素使用
  
value

  property 和
  
input

  事件；
• checkbox 和 radio 使用
  
checked

  property 和
  
change

  事件；
• select 字段将
  
value

  作为 prop 并将
  
change

  作为事件。

父组件

<template>
  <div class="home">
    <!-- 父组件 -->
    <p>父组件</p>
    <button @click="age++">age自增</button>
    <child v-model="age"></child>
    
  </div>
</template>

<script>
// @ is an alias to /src
import child from '@/components/HelloWorld.vue'

export default {
  name: 'Parent',
  components: {
    child
  },
  data() {
    return {
      age:1
    }
  },
}
</script>

子组件

<template>
<!-- 子组件 -->
  <div class="abc">
    <h3>子组件</h3>
    父组件传递过来的值是:{{value}}
    <button @click="$emit('input',5)">把子给父组件</button>
  </div>
</template>

<script>
export default {
  name:'child',
  props:{value:{type:Number,default:1}}
}
</script>

<style lang="less" scoped>
.abc{
  height: 200px;
  width: 300px;
  border: 1px solid red;
  margin: 0 auto;
}
</style>

效果

当在父组件中点击age自增的时候 数字会++ 当点击把子组件的值给父组件时值 会变为5 这样就实现了 不管是在那个组件中 数据发生变化 值都变化了

类似的博客参考:https://blog.csdn.net/qq_38128179/article/details/90370521