• 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>
    
    

      

  • 相关阅读:
    Emgu安装配置及使用
    ASP.NET动态网站制作(1)--html
    ASP.NET动态网站制作(0)
    文件自动拆分
    visual studio 常用快捷键
    用vector构造自动扩容的二维数组
    C++中的struct
    Word论文写作如何实现公式居中、编号右对齐
    借助 Filter 生成静态页面缓存问题
    xshell 中解决中文乱码问题
  • 原文地址:https://www.cnblogs.com/shaozhu520/p/16139356.html
Copyright © 2020-2023  润新知