• vue子组件修改父组件vmodal传递回来的值 义美


    vue子组件修改父组件v-modal传递回来的值
    场景
    解决
    父组件
    子组件
    场景
    有时候需要将一些组件参数配置化,那些就需要抽离,那些vue 是单向数据流,子组件是不允许直接修改父组件的值,除去一些自定义配置化属性的修改,可以采用默认配置,解决代码

    解决
    会有一种默认的隐藏传递:那就是如果父组件传递的是带有v-modal值的,那么vue是自带了一个隐藏的属性 this.$emit(‘input’,val)

    父组件

     <template>
       <div> 
         父组件  {{data}}
        <child  v-model="year"  />
      <div/>
    </template>
    <script>
      import child from "./childrenS.vue";
      export default{
        data(){
          return {
            year:‘’
          }
        },
        components: {
          child
        },
      }
    </script>
    

      


    子组件

    <template>
        <DatePicker
          type="year"
          v-model="model"
          @on-change="doSelect"
          style="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>
    
    

      

  • 相关阅读:
    phpcms后台获取当前登录账号的数据
    【原生】验证码的生成
    PHP 生成图片缩略图函数
    3秒后自动跳转页面【js】
    JS定时器
    JS字符串转换成json对象。。。。
    JVM调优总结(十二)-参考资料
    JVM调优总结(十一)-反思
    JVM调优总结(十)-调优方法
    浅谈java内存泄漏
  • 原文地址:https://www.cnblogs.com/shaozhu520/p/16139356.html
Copyright © 2020-2023  润新知