vue子组件修改父组件v-modal传递回来的值
vue子组件修改父组件v-modal传递回来的值
场景
解决
父组件
子组件
场景
有时候需要将一些组件参数配置化,那些就需要抽离,那些vue 是单向数据流,子组件是不允许直接修改父组件的值,除去一些自定义配置化属性的修改,可以采用默认配置,解决代码
解决
会有一种默认的隐藏传递:那就是如果父组件传递的是带有v-modal值的,那么vue是自带了一个隐藏的属性 this.$emit(‘input’,val)
父组件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <template> <div> 父组件 {{data}} <child v-model= "year" /> <div/> </template> <script> import child from "./childrenS.vue" ; export default { data(){ return { year:‘’ } }, components: { child }, } </script> |
子组件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <template> <DatePicker type= "year" v-model= "model" @on-change= "doSelect" style= "width:100%" :placeholder= "$t('inputTips.pleaseFillIn')" ></DatePicker> </template> <script> export default { data () { return { model: this .value } }, watch: { 'value' : function () { this .model = this .value } }, props: { year: { type: String, default : '' }, value: { type: [String, Number, Array], default : '' } }, methods: { doSelect (item) { this .$emit( 'input' , item) } } } </script> <style lang= "less" scoped> </style> |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
2019-04-13 Nodejs连接12种数据库例子集合