Happy New Year!

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>

  

posted @   义美-小义  阅读(826)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
历史上的今天:
2019-04-13 Nodejs连接12种数据库例子集合
返回顶部小火箭
世界很公平,想要最好,就一定得付出!
x
github主页
点击右上角即可分享
微信分享提示