Esas cosas sobre vue (3)

Llega oferta, cava amigos a recoger! Estoy participando en el evento de registro de reclutamiento de primavera de 2022, haga clic para ver los detalles del evento

1. Habla sobre cómo se comunican

El método de comunicación de vue2:

• Ligeramente (lo agregaré más tarde cuando tenga tiempo. Si lo necesita, puede consultar primero la documentación de vue)

El método de comunicación de vue3:

• accesorios
• emitir
• proporcionar/inyectar
• atributos
• modelo v
• vuex
• guante
• árbitro

apoyos y emite

// 父组件内容
<dialogChild :dataValue="title"></dialogChild>

setup(){
  const state = reactive({
    title:'你好哟'
  })
  return{
    ...toRefs(state)
  }
}

// 子组件内容
props:{
  dataValue:{
    type:String,
    default:()=>''
  }
}

<div>child-first:{{dataValue}}</div>
复制代码

emitir

// 子组件内容
<el-button size="small" type="primary" @click="changData">点击</el-button>

export default {
  name: "test",
  emits: ['changData'],
  props: {
    dataValue: {
      type: String,
      default: () => ''
    }
  },
  setup(props, {emit}) {
    const number = ref('1')
    const state = reactive({
      text: '测试',
      count: '2'
    })
    const changData = () => {
      emit('changData', state.text)
    }
    return {
      ...toRefs(state),
      number,
      changData
    }
  }
}

// 父组件内容
<dialogChild :dataValue="title" @changData="getTextData"></dialogChild>

const getTextData = (value) => {
  console.log(value) // 测试
}
复制代码

Nota: Una cosa a tener en cuenta aquí es que algunos tienen una advertencia

[Advertencia de Vue]: los detectores de eventos extraños que no emiten (changData) se pasaron al componente pero no se pudieron heredar automáticamente porque el componente representa fragmentos o nodos raíz de texto. Si el oyente está destinado a ser solo un oyente de eventos personalizado de componente, declárelo usando la opción "emite".

Solución: declare el nombre del evento personalizado en
emits: ['changData']

Estos dos, provide/inject
, pueden cruzar todos los límites, pero no responden, por lo que generalmente se usan en componentes.

// 父组件内容
setup() {
  const state = reactive({
    title: '你好哟',
    name: '超越'
  })
  const getTextData = (value) => {
    console.log(value)
  }
  provide('name', state.name)  // 注入
  return {
    ...toRefs(state),
    getTextData
  }
}

// 子组件或者孙组件获取内容
setup() {
  const getName = inject('name') // 获取
  console.log('getName:', getName) // 超越
}
复制代码

2. Epílogo

En este momento, solo se enumeran algunos aquí, y los agregaré más adelante. Si te es útil, sigue tu corazón ❤️

Observaciones: Favor de indicar la fuente al reimprimir, el derecho de interpretación final pertenece al autor.