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

巧妙的使用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