搬砖日记：关于sync用不了的问题

自己封装了个输入框的组件，想要实现的输入框的值的修改可以实时修改到父组件的值
印象中看到过人家用.sync修饰符去实现这个功能，大抵是
//父组件
<searchInput :value.sync="value"></searchInput>
//子组件
<input v-model="value" @input="$emit('update:value', value)"/>
我一直不生效，父组件的值就是没被改到
项目版本 vue3 ts

文章目录

sync的前身

sync

sync的vue3用法

总结

sync的前身

在sync出现之前，解决方案是：

//父组件
<searchInput :value="value" @update:value="value = $event"></searchInput>
//子组件
<input v-model="value" @input="$emit('update:value', value)"/>

这么一看，这个@update:value也没有很厉害，其实也只是一个函数名称罢了。

sync

据官网所说，.sync修饰符是在vue2.3.0中新加的

因为我搭的是vue3+ts的项目，我查了一早上，根本就没看见vue3的文档里面有sync这个东西，问了大佬，大佬：“vue3不是废除这个东西了吗？”好家伙，恍然大悟。
换了个思路重新查，看到了v-model，顺藤摸瓜，找到了vue3的方法。

sync的vue3用法

官网链接
官网是写得很详细的，我这里贴一下我vue3+ts项目的写法（组合式API）

子组件


//step1:使用@input监听输入框把参数暴露出去
<el-input v-model="inputValue" @input="$emit('update:inputValue', inputValue)"></el-input>
<script setup lang="ts">
//step2：配置参数类型
interface Props {inputValue?: string,
}
//step3：接收父组件参数
const props = defineProps<Props>()
//step4：声明更新事件
const emit = defineEmits<{(e: 'update:inputValue', value: string): void,
}>()
</script>

父组件

<search-Input-vue v-model:inputValue="inputValue" :optionList="optionList"></search-Input-vue>

总结

其实就是把:value.sync="value"换成v-model:value="value",然后记得在update:value函数需要声明一下

突然想到是哪里看到这个sync了，那些组件库有好些就有写着支持.sync
但是说找了好久，没有铺天盖地的文说syncvue3被废弃了，这个真的有点离奇

搬砖日记：关于sync用不了的问题相关推荐

《搬砖日记》Obi Rope插件的简单使用
今天介绍一个Unity绳子插件Obi Rope的简单使用先分享一下插件: 链接:https://pan.baidu.com/s/1XQp3mYxTRfvXwsU_Z_9ILw 提取码:pw08 进入 ...
搬砖日记之stream流
stream流可以看成一种高级的iteror她有以下几个特性:1.惰式执行:中间操作只会生成标记,结束操作会触发实际计算,计算发生时会把所有中间操作积攒的操作以pipeline的方式执行,这样可以减少 ...
【攻略】如何用云服务器实现云搬砖
本篇博文是从我的公众号转过来的,请尊重作者的劳动成果,未经允许请勿转载!值得说明的是,本篇博文主要适用于使用Python的同学. 目录 0 引言 1 本地PC(windows)如何远程连接云服 ...
名词解释第二十九讲：搬砖
这里是王团长区块链学院,与最优秀的区块链人一起成长!今天给大家讲讲搬砖. 点击观看视频教程:名词解释第二十九讲:搬砖 2017年,有一个非常热门的词叫"搬砖",当然,这个" ...
「表面光鲜，实则搬砖」，机器学习社区自嘲不为人知的AI工程师真相
贾浩楠发自凹非寺量子位报道 | 公众号 QbitAI 机器学习工程师岗位,还香吗? 在培训机构或求职网站随便一搜,机器学习简直不要更热. 但是,国外的同行们却在一则Reddit热帖上,吐槽揭露 ...
3人2周上线，2人1周上线，Solo明天上线！开发周期果然不能用搬砖模式计算......
有10000块砖需要我们去搬,1个人1天可以搬1000块,那么总共要10天搬完.为了更快的完成任务,如果我们派10个人去一起搬砖,那么1天就可以搬完. 这个简单的道理,每个人都懂,如果要让事情做的话, ...
青龙羊毛——东方头条（搬砖，非原创）
改版公告--新青龙羊毛 1.东方头条软件自己去找,不放邀请链接! 作者码子:003584319 我的码子:003170160(别填我码子了,刚注册就黑了!) 2.脚本宝箱 https://raw. ...
开源Python做的火币和ZB搬砖差价监控程序
火币和ZB网站域名经常换,页面也经常改,只保证发布文章时能用,将来要用自己改改URL地址一类的. 代码涉及到websocket和requests采集数据,使用pyquery解析HTML页面,color ...
站长图卦：每天坚持搬砖定有美好明天
站长图卦帮您在嬉笑中了解近期与站长有关的信息. 时间8月上旬.作者:卢松松 [1]微信5.0发布了,你怎么看?如图 [2]我来了搜狗悄悄推出了站长平台,知道吗?这个平台一个月前就出来了,估计功能太差 ...

搬砖日记：关于sync用不了的问题

文章目录

sync的前身

sync

sync的vue3用法

总结

搬砖日记：关于sync用不了的问题相关推荐

最新文章

热门文章