v-model双向组件数据绑定.

​​​​​​​v-model原理

如input:利用oninput事件监听input内容的变化,利用$event.target.value获取 实时内容,然后传递给组件中的变量,同时,input标签上利用v-bind又将value动态绑定值改变量,实现双向绑定

目录

1.传统绑定使用方法.

第二种 利用v-model解决的方法,

---

1.传统绑定使用方法.

模拟案例是一个加减的方法.

先注册对应组件.可以使用全局注册或者局部注册.或者全自动注册.

// 全局注册组件  在main.js中
import Nume from './views/dashboard/link.vue'
Vue.component(Nume.name, Nume)

// 如果在这里报错提示大小写.请自己在子组件中添加对应的name

子级中对应的代码

<template>
  <div>
<button @click="fn(-1)">-</button>
<input type="text" :value="numFn">
<button @click="fn(1)">+</button>
  </div>
</template>

<script>
export default {
  name: 'Nume',
//父传子
   props: {
     numFn: {
//接收的数据类型
       type: Number,
//接收的默认值
       default: 1
     }
   },
   methods: {
     fn(set) {
       this.$emit('input', this.numFn + set)
     }
  }
}
</script>

<style>

</style>

父级中输入

<template>
  <div>
    <Nume :num-fn="numFn" @input="input" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      numFn: 1
    }
  },
  methods: {
    input(obj) {
      this.numFn = obj
    }
  }
}
</script>

<style>

</style>

第二种 利用v-model解决的方法,

父级的代码

<template>
  <div>
    <Nume v-model="numFn" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      numFn: 1
    }
  }
}
</script>

<style>

</style>

子级

<template>
  <div>
    <button @click="fn(-1)">-</button>
    <input type="text" :value="value">
    <button @click="fn(1)">+</button>
  </div>
</template>
<script>
export default {
  name: 'Nume',
  props: {
    value: {
      type: Number,
      // 设置默认值
      default: 1
    }
  },
  methods: {
    fn(set) {
      this.$emit('input', this.value + set)
    }
  }
}
</script>

<style>

</style>

// 因为默认值设定的是value 和input 所以可以省略model的定义.
// 如果更换名字.就必须在子组件中设置对应更换的名字

  model: {
     prop: 'value',
     event: 'input'
   },