Resumo dos métodos de passagem de parâmetros dos componentes pai-filho vue2

1. props e função $emit

Comunicação pai-filho:

De pai para filho: passar dados por meio de adereços

Passando de filho para pai: transmissão de gatilho por meio de eventos personalizados

Essa maneira de passar parâmetros é chamada de comunicação de evento personalizado. E também é o mais utilizado no trabalho atual.

Código do componente pai, por exemplo:

<template>
  <div>
    <h2>父组件数据</h2>
    <p>{
   
   {username}}</p>
    <ChildrenCompVue :username="username" @mychange="changeUsername"></ChildrenCompVue>
  </div>
</template>
<script>
import ChildrenCompVue from './ChildrenComp.vue'
export default {
    data(){
        return{
            username:"xiaowang"
        }
    },
    components:{
        ChildrenCompVue
    },
    methods:{
        changeUsername(val){
            this.username = val
        }
    }
}
</script>
<style>
</style>

@mychange="changeUsername"

中，mychange é o nome do evento definido por você. O nome do evento não deve ser igual ao nome do sistema, como: click, change, focus, etc. 

Código do subcomponente, por exemplo:

(Quando um subcomponente aciona um evento personalizado, a função que aciona o evento personalizado correspondente será executada imediatamente)

<template>
  <div>
    <h2>子组件</h2>
    <p>外部数据：{
   
   {username}}</p>
    <button @click="updateUser">修改username</button>
  </div>
</template>
<script>
export default {
    // 无需再props接受外部的回调
    props:["username"],
    methods:{
        updateUser(){
            // 触发自定义事件
            this.$emit("mychange","xiaofeifei")
        }
    }
}
</script>
<style>
</style>

$emit é uma API fornecida a nós por vue, que pode acionar eventos personalizados

Vantagens: os subcomponentes podem passar parâmetros acionando eventos por meio da API, sem chamar as próprias funções

Desvantagens: Novos eventos adicionais precisam ser mantidos por você

 Dois, $parent e $children

Isso representa o componente atual e cada componente tem um atributo $parent para representar o componente pai. $children representa todos os componentes filhos.

Podemos obter $children no componente pai para obter todos os componentes filho para chamar suas propriedades e métodos

Também podemos obter o único componente pai $parent no componente filho, chamar propriedades e métodos

Código do componente pai, por exemplo:

<template>
    <div>
        <ChildrenCompVue :username="username"></ChildrenCompVue>
        <button @click="showMessage">获取到子组件的数据</button>
    </div>
</template>
<script>
import ChildrenCompVue from './ChildrenComp.vue'
export default {
    data() {
        return {
            username: "xiaowang",
        }
    },
    components: {
        ChildrenCompVue
    },
    methods: {
        showMessage(){
            console.log(this.$children[0].password);
            this.$children[0].show()
        }
    }
}
</script>
<style>
</style>

Código do subcomponente, por exemplo:

<template>
    <div>
        <h2>子组件</h2>
        <p>外部数据：{
   
   { username }}</p>
        <button @click="parentMethods">通过$parent调用父组件</button>
    </div>
</template>
<script>
export default {
    // 无需再props接受外部的回调
    props: ["username"],
    data() {
        return {
            password: "123"
        }
    },
    methods: {
        show(){
            console.log(123345);
        },
        parentMethods(){
            console.log(this.$parent.changeUsername("王二麻子"));
        }
    }
}
</script>
<style>
</style>

$parent chama o método do componente pai

Vantagens: comunicação conveniente, você pode operar em qualquer lugar onde conseguir o objeto

Desvantagem: Esta operação não é conveniente quando há muitos componentes aninhados

3. $attrs e $listeners

Há um atributo $attrs neste objeto. Aceite os dados externos, mas exclua os dados após a aceitação dos adereços.

Os dados externos em subcomponentes são divididos em duas partes: props accept. $attrs para aceitar

Quando dados externos são passados ​​para subcomponentes, se os dados estiverem em $attrs, você pode usá-los diretamente

<template>
<p>{
   
   {$attrs.age}}</p>
</template>

Para acionar eventos personalizados do componente pai para componentes filhos, podemos obter todos os eventos personalizados em $listeners

<button @click="$listeners.changeMyUser">自己触发$listeners</button>

Você pode chamar o evento diretamente para acioná-lo, mas geralmente não é recomendado usar