vue v-model的原理

2024-10-22 02:49:15

关于v-model

v-model 可以实现表单与data里的双向绑定

很多插件上可以在组件上使用v-model，他是如何实现的呢,其实v-model就是一个语法糖

<input v-model="something">

//上面的就等同於下面的,也就是说，你只需要在组件中声明一个name为value的props，并且通过触发input事件传入一个值，就能修改这个value。

<input :value="something"  @input="something = $event.target.value">

父组件中



<template>

  <div class="home">

    <HelloWorld msg="Welcome to Your Vue.js App" v-model="age"/>

  </div>

</template>

<script>

// @ is an alias to /src

import HelloWorld from '@/components/HelloWorld.vue'

export default {

  name: 'Home',

  components: {

    HelloWorld

  },

  data(){

    return {

      age:123123123123

    }

  }

}

</script>

子組件中只需要声明一个name为value的props，并且通过触发input事件传入一个值，就能修改这个value。

<template>

    <div>

      <div>{{value}}</div>

      <button @click="handleInput">修改value</button>

    </div>

</template>

<script>

export default {

  props:['value'],

  data(){

    return {

      msg:333

    }

  },

  methods:{

    handleInput(){

      this.$emit('input','我是新的值')

    }

  }

}

</script>

如果绑定多个值的话，建议我们用object对象类型，Array数组类型，也就是说我们接收的value类型需要改变下。

最新文章

热门文章