账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    如何正确使用vue中的sync修饰符?
    26
    0

    vue父子通讯是单向数据流,也就是子组件不能修改父组件的值,但是在很多情况下是需要这样做的,比如在做功能编辑的时候,子组件需要带入父组件的原始值,而且子组件也需要修改这个值,到最后的保存值中,部分代码

    // 父组件
    <step-two-other v-bind:stepTwoConfig.sync="monitorConfigStr"></step-two-other>
    
    // 子组件
    <el-input v-model="config"></el-input>
    props: {
        stepTwoConfig: String
    },
    computed: {
        config: {
            get() {
                return this.stepTwoConfig
            },
            set(val) {
                this.$emit('update:stepTwoConfig', val)
            }
        }
    }

    以上代码是正确的通信方式。

    但是在使用的时候发现一些问题,如果父组件传入的值是简单数据类型(string、number)时必须要使用$emit去更新。
    如果父组件传入的值是引用类型时则不需要,甚至父组件不用带sync也可以,如下两种方式都不会报错,而且能挣钱传值:

    // 方式1:::
    
    // 父组件
    <step-two-other v-bind:stepTwoConfig.sync="monitorConfigStr"></step-two-other>
    
    // 子组件
    <el-input v-model="stepTwoConfig.name"></el-input>
    props: {
        stepTwoConfig: Object
    }
    
    
    // 方式2:::
    
    // 父组件
    <step-two-other :stepTwoConfig="monitorConfigStr"></step-two-other>
    
    // 子组件
    <el-input v-model="stepTwoConfig.name"></el-input>
    props: {
        stepTwoConfig: Object
    }
    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 10 元积分
        全部回答
    • 0
    • 回憶↘無止境的痛 普通会员 1楼

      Vue中的sync修饰符用于父子组件之间双向绑定 Props。在子组件中修改一个带sync修饰符的prop时,它会触发一个自定义事件,该事件携带新值,并同步更新父组件中的相应属性。

      以下是正确使用sync修饰符的基本步骤:

      1. 在父组件中,将props传递给子组件并添加.sync修饰符:

      ```html

      ```

      1. 在子组件中,当需要更新这个prop时,直接修改它,并通过$emit发送一个更新事件,事件名应为update:myProp(这里的myProp要与你在props中声明的名字一致,并在前面添加update:前缀):

      ```html

      ```

      这样,当你点击子组件中的按钮时,不仅子组件中的myProp会更新,同时父组件中的parentValue也会同步更新。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部