zoukankan      html  css  js  c++  java
  • vue子组件向父组件传值的方法

    1.使用v-model

    父组件使用v-model属性向子组件传值

    <cmbtpop v-model="show"  :name="entity.name" ></cmbtpop>
    

      子组件使用value属性接受参数(当属性名称value被占用时可以使用model属性修改接受v-model参数的属性名称,具体可参考model的api)

    然后使用$emit方法更新父组件v-model参数

    <div :show="newValue" @click="changeValue" >{{name}}</div>
    
    export default {
      name: 'cmbtpop',
    
    
       data() {
        return {
            newValue : this.value,//使用newValue 控制子组件
        
        };
      },
      
      props: {
        value:{ 
          type:Boolean,
          default: false
          }  ,
        name: String
      },
      watch:{
               value:function(){
                 this.newValue = this.value;//父组件的show值改变时重新控制子组件
               }
              
            },
    
      methods:{
          changeValue(){ 
            this.newValue = !this.newValue;
            this.$emit('input', this.newValue) // 父组件中的show会被更改成newValue值
          }
      }
    }
    

      2.使用同步后缀sync

      在父组件的传参属后加入.sync标明该属性同步

            在子组件中使用$emit方法更新父组件同步属性

    <cmbtpop show.sync="show"></cmbtpop>
    
    
    
    
    
    //子组件
    export default {
        props: {
          show: {
            type: Boolean,
            default: false
          }
        },
        methods:{
          changeValue(){
            this.newValue = !this.newValue;
            this.$emit('update:show', this.newValue) // 父组件中的show会被更改成newValue值
          }
     } }

  • 相关阅读:
    领料单取整
    财务应付金额对不上的
    销售订单计算交期
    辅助单位启用
    K3CLOUD日志目录
    QLIKVIEW-日期格式,数字格式写法
    MRP运算报错-清除预留
    整单折扣后 财务、暂估应付价税合计对不上的问题处理
    BZOJ 2976: [Poi2002]出圈游戏 Excrt+set
    BZOJ 3060: [Poi2012]Tour de Byteotia 并查集
  • 原文地址:https://www.cnblogs.com/uip001/p/14283504.html
Copyright © 2011-2022 走看看