6***@qq.com
6***@qq.com
  • 发布:2023-09-06 17:49
  • 更新:2025-02-18 18:54
  • 阅读:369

uni-app v3 组件v-model,.sync双向绑定不支持?

分类:uni-app

uni-app v3 组件v-model,.sync 不支持么?

父组件:// msg = '123';

<view>  
    <l-code :value.sync="msg" />  
    <l-code v-model="msg" />  
</view>  

子组件:

<view class="l-code" @click="update_">  
    {{value}}  
</view>  

<script>
export default {
name: "l-code",

    props: {  
        value: {  
            type: [String, Number],  
            default: '---',  
        },  
    },  

    methods: {  

        update_() {  
            this.$emit("update:value", 1)  
            this.$emit("input", 1)  
        },  

    }  
}  

</script>

2023-09-06 17:49 负责人:无 分享
已邀请:
BJ_ZXJ

BJ_ZXJ

vue3 就不支持了吧

  • 6***@qq.com (作者)

    那双向绑定用什么方法?

    2023-09-06 17:58

2***@qq.com

2***@qq.com

我也注意到,.sync 修饰符在vue3中被弃用了。
vue3中的写法为:

pageTitle是父组件的data,title是子组件的prop

<ChildComponent v-model:title="pageTitle" />

<!-- 是以下的简写: -->

<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />

当pageTitle,title为同样的名字时
<ChildComponent v-model="pageTitle" />

<!-- 是以下的简写: -->

<ChildComponent modelValue="pageTitle" @update:modelValue="pageTitle = $event"
/>

参考来源

  • 2***@qq.com

    子组件中仍需使用this.$emit("title", 新的值)以触发更新

    2025-02-18 18:59

要回复问题请先登录注册