Como a opção vue3de vue2mudança é alterada para uma API de combinação e a soma é dataintegrada methodsa setup, o uso é diferente, mas a diferença não é ruim.
1. Método defineProps
O componente pai declara os dados a serem passados na forma de ligação de dados, e o componente filho cria um objeto props por meio do método defineProperty() para obter os dados do componente pai.
No componente pai:
<!-- data是我们要传递的数据 -->
<child-components :data="data"></child-components>No subcomponente:
Deve-se notar que o valor passado pelo componente pai aqui não é muito diferente daquele de vue2, mas é necessário introduzir defineProps e usar uma variável para obter este defineProps para aceitar dados.
<template>
<ul>
<li v-for="i in props.data" :key="i">{
{ i }}</li>
</ul>
</template>
<script setup>
import { defineProps } from 'vue'
const props = defineProps({
data: {
type: Array,
default: () => [],
},
})
</script>
2. Método defineEmits
No subcomponente:
<script setup>
import { defineEmits} from 'vue'
methods:{
const emits = defineEmits(['add'])
emits('add', 1)
}
</script>No componente pai:
<!-- add是子组件要传递的动作,handleAdd是监听到之后执行的事件 -->
<child-components @add="handleAdd"></child-components>
<script>
const list = ref([1,2,3])
const handleAdd = value => {
list.value.push(value)
}
</script>
3. Os irmãos mitt repassam o valor
Para deixar nosso código organizado, usaremos vários componentes para construir uma página completa,
Mas algo está errado com a escrita. Isso é vue3. Não estou familiarizado com muitas gramáticas. Atrevo-me a escrever assim. Escrevo com medo e confusão.
Digite o campo inicial:
Os plug-ins são necessários para passar valores entre componentes irmãos: mitt
Primeiro passo
instalar npm imit
O hábito aqui é usar vue2 para passar valores e usar bus como middleware
Após baixar o middleware mitt, importe esta instância no arquivo js, defina uma variável para receber e finalmente exporte
Ao usá-lo, ambos os componentes precisam importar este arquivo de instância
Entrega de componentes Brother:
<script setup>
import emitter from '@until/bus.js'
methods:{
getData() {
emitter.emit('event',this.addDialogFlag)
}
}
</script>Ao despachar, o evento é precedido pelo evento, seguido dos parâmetros a serem passados em
Os componentes irmãos aceitam:
<script setup>
import emitter from '@until/bus.js'
onMounted() {
emitter.on('event',e=>{
this.data.username = e;
this.getData();
})
}
</script>Ele precisa ser recebido no ciclo onMounted(). Use emitter.on() aqui
Componentes vovô e neto passam valor VueX
Vuex é uma ferramenta de gerenciamento de estado no site oficial do Vue. Usando esta ferramenta, a comunicação entre os componentes ancestrais pode ser facilmente realizada.
Anexo: defineProps e defineEmit não são obrigatórios ao passar valores, e o efeito da passagem de valores ainda pode ser alcançado sem introduzi-los. Recomenda-se introduzi-los para evitar relatórios de erros desnecessários