vue使用v-model实现父子组件间通信

前言

vue父子组件之间的通信方式:

  • 父组件到子组件:通过props传递数据;
  • 子组件到父组件:通过自定义事件实现;

v-model在组件上的使用

vue开发中遇到一个问题,父组件向子组件传递数据,子组件通过事件改变该数据的值,同步给父组件,我选择了v-model来实现
父组件:

<template>
    <div>
        <child v-model="total"></child>
        <button @click="increse">增加5</button>
    </div>
</template>

<script>
import Child from "./child.vue"
export default {
    components: {
        Child
    },
    data: function () {
        return {
            total: 0
        };
    },
    methods: {
        increse: function () {
            this.total += 5;
        }
    }
}
</script>

子组件:

<template>
    <div>
        <span>{{value}}</span>
        <button @click="reduce">减少5</button>
    </div>
</template>

<script>
export default {
    props: {
        value: Number  // 注意这里是value
    },
    methods: {
        reduce: function(){
            this.$emit("input", this.value - 5)
        }
    }
}
</script>

参考文章:
vue使用v-model实现父子组件间通信

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。