Vue montagem por valor passado de pai para componentes irmão filho pai e filho por valor

vue componente pai a um sub-conjunto de valor

componente pai submontagem para passar o valor  : Reduzir = "Recolhido"  , submontagem receber os valores do componente pai transmitidos pelos suportes   suportes: [ "colapso"]  

componente pai submontagem para passar valores  a isso. $ EMIT ( 'FUNC', Val)     , componente pai, definindo um método   @ func = "getVal"        valor é passado para receber o subconjunto

Irmãos Um componente passar a montagem por meio do primeiro valor     este. $ Emit ( 'func' , val)    para passar valores componente pai, o componente B e um componente recebe o valor transmitido por os suportes do componente pai

 

componente pai

< Template > 
  < um layout id = "componentes de layout de-demo-custom-gatilho" > 
    < Sider : desabou = "colapso" @func = "getVal" > </ Sider > 
    < um layout > 
      < Header : desabaram = "colapso" @getCollapsed = 'getCollapsed' > </ Header > 
      < Content > </ Content > 
    </ um layout > 
  </ um layout > 
</ Template > 
< roteiro >
importação Sider de ' ./Sider ' 
Cabeçalho de importação de ' ./Header ' 
conteúdo de importação de ' ./Content ' 
exportação padrão { 
  dados () { 
    return { 
      desabou: falsa 
    }; 
  }, 
  Componentes: { 
    Sítios, 
    cabeçalho, 
    conteúdo 
  }, 
  métodos: { 
    getCollapsed (val) { 
      este .collapsed = val 
    }, 
    getVal (val) { 
      este .collapsed = val 
    } 
  }
}; 
</ Roteiro > 
< style > 
# componentes de layout de-demo-custom-gatilho { 
  altura : 100% ; 
} 
# Componentes de layout de-demo-custom-gatilho .trigger { 
  font-size : 18px ; 
  A linha-altura : 64px ; 
  estofamento : 0 24px ; 
  cursor : ponteiro ; 
  transição : 0.3s cor ; 
} 

# Componentes de layout de-demo-custom-gatilho .trigger: hover { 
  cor : # 1890ff; 
} 

# Componentes de layout de-demo-custom-gatilho .logo { 
  altura : 32px ; 
  fundo : rgba (255, 255, 255, 0,2) ; 
  margem : 16 pixels ; 
} 
</ Style >

 

Um subconjunto

< Template > 
  < um layout-header estilo = "background: # fff; padding: 0" > 
    < a-ícone
       class = "gatilho" 
      : Tipo = "colapso 'menu-desdobrar': 'menu de vezes'" 
      @ clique = "collapseds" 
    /> 
  </ um layout-header > 
</ template > 
< roteiro > 
exportação padrão { 
  adereços: [ ' colapso ' ], 
  de dados () { 
    return { 
      
    }; 
  }, 
  Métodos:
      este .getcollapsed =  ! este .getcollapsed 
    }, 
  }, 
  calculado: { 
    getcollapsed: { 
      get () { 
        retornar  este .collapsed 
      }, 
      set (val) { 
        isso . $ Emit ( ' getCollapsed ' , val) 
      } 
    } 
  } 
}; 
</ Roteiro > 
< estilo > 

</ estilo >

 

 

subconjunto B

< Template > 
  < um layout-sider
     : gatilho = "null" 
    dobrável 
    v-modelo = "getCollapsed" 
    breakpoint = "lg" 
    @collapse = "onCollapse" 
    @breakpoint = "onBreakpoint" 
  > 
    < div class = "logo"  /> 
    < um menu temático = "dark" modo = "inline" : defaultSelectedKeys = "[ '1']" > 
      < a-item de menu key = "1" > 
        <a-ícone tipo = "user"  /> 
        < extensão> Nav 1 </ palmo > 
      </ a-item de menu > 
      < a-item de menu key = "2" > 
        < a-ícone tipo = "video-camera"  /> 
        < espaço > nav 2 </ palmo > 
      < / a-item de menu > 
      < a-item de menu key = "3" > 
        < a-ícone tipo = "Upload"  /> 
        < espaço > nav 3 </ palmo > 
      </ A-item de menu > 
    </ um menu >
  </ Um layout-sider > 
</ template > 
< roteiro > 
exportação padrão { 
  adereços: [ " colapso " ], 
  de dados () { 
    return { 
    }; 
  }, 
  Métodos: { 
    onCollapse (getCollapsed, tipo) { 
      console.log (getCollapsed, tipo); 
    }, 
    OnBreakpoint (quebrado) { 
      console.log (quebrado); 
    } 
  }, 
  Calculado: { 
    getCollapsed: { 
      get () { 
        retornar  este .collapsed 
      }, 
      set (val) {
        este $ Emit (. ' func ' , val) 
      } 
    } 
  }, 
}; 
</ Roteiro > 
< estilo > 
</ estilo >

 

mudança Props no valor componente dado pela componente de valor segue o nêutron

 

 

soluções

Componente deve passar o valor para alterar o valor do elemento pai é calculado através do cálculo das propriedades da sub-componentes, se você quiser alterar o valor dos dados de adereços

calculado: { 
    getCollapsed: { 
      get () { 
        return this.collapsed 
      }, 
      set (val) { 
        . Estes $ Emit ( 'func', val) 
      } 
    } 
  },