Uma maneira de fazer, se no caso você possui um <router-view>
no seu App.vue, e o componente que você está emitindo o evento de preenchimento do 'Teste Cliente' estiver um nível abaixo apenas, pode-se criar um evento que irá realizar o preenchimento do nome direto, sem uma função:
App.vue
<template>
<div id="app">
<p>--{{ nomeCliente }}--</p>
<router-view @mostrarNome="nomeCliente = $event"/>
</div>
</template>
<script>
export default {
name: 'App',
data: () => ({
nomeCliente: 'Meu nome'
})
}
</script>
HelloWorld.vue
<template>
<div class="formup">
<h1>Componente interno</h1>
<form class="createform" @submit.prevent="evento">
<button type="submit" class="btn btn-primary btn-block btn-large">
Enviar
</button>
</form>
</div>
</template>
<script>
export default {
name: 'Stackoverflow',
methods: {
evento () {
this.$emit('mostrarNome', 'Teste Cliente')
}
}
}
</script>
Detalhe que a emissão do evento pode ser em qualquer método, watch
, etc, e não apenas com o @submit
.
Uma outra maneira de fazer é utilizando o Vuex. No caso, provavelmente você possui um objeto "cliente", onde este ao ser preenchido você armazenaria ele em uma Store e seu estado ficaria uniforme em toda a aplicação. Um exemplo simples de uma ClientStore seria:
ClientStore.js
import Vue from '@/bootstrap'
// state
const state = {
client: {}
}
// getters
const getters = {
client: state => state.client
}
// actions
const actions = {
getClient: ({ commit, state }) => {
return Vue.http
.get('clients/1') // mudaria a requisição para a que você precisa
.then(({ data }) => commit('setClientData', data))
}
}
// mutations
const mutations = {
setClientData (state, data) {
state.client = data
}
}
export default {
state,
getters,
actions,
mutations
}
Assim, com os dados na Store preenchidos, você acessaria em qualquer local da sua aplicação com o this.$store.state.client
ou this.$store.getters.client
ou pode realizar o mapeamento para client e acessar com o this.client
:
App2.vue
<template>
<div id="app">
<button type="button" @click="test">Test</button>
<router-view/>
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
name: 'App',
computed: mapState({
client: state => state.ClientStore.client
}),
methods: {
test () {
console.log(this.client)
}
}
}
</script>
Confira mais na documentação sobre como instalar/configurar o Vuex, há diversas maneiras, utilize a que considerar melhor. Se for utilizar, use junto ao Vue Dev Tools, uma ferramenta excelente para trabalhar com eventos/store.