组件间数据双向绑定

最新推荐文章于 2024-05-26 22:57:35 发布

逆风向北

最新推荐文章于 2024-05-26 22:57:35 发布

阅读量858

点赞数

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/weixin_51333039/article/details/125256483

版权

vue组件间数据双向绑定v-model的使用

摘要由CSDN通过智能技术生成

<template>
    <div>
        <SaveModal v-model="firstNum">
        </SaveModal>
        <div>父组件中的显示：{
  {firstNum}}</div>

    </div>
</template>
<script>
    import SaveModal from './save-modal';

    export default {
        components: { SaveModal },
        data () {
            return {
                firstNum: 30
            }

        },
        methods: {

        }
    }
</script>

1、在本实例中，先给fristNum一个初始值30，通过v-model数据双向绑定，赋值给子组件，（通过：value=value这种写法只是父组件给子组件传了值，是单向的）而v-model绑定时默认会给子组件传一个value值，在子组件中通过props接收这个value。

2、接收到从父组件传来的value后将value赋值给定义好的firstName，此时子组件中就能拿到由父组件中定义的firstNum：30了，在子组件中定义了一个点击事件，点击后firstNum 的值加1，但是在子组件中的改变父组件并不知道，就需要通过this.$emit('on-change',this.firstNum)将改变后的值传给父组件，让父组件知道。