vue的那些事（三）

Offer 驾到，掘友接招！我正在参与2022春招打卡活动，点击查看活动详情

1.谈谈他们的通讯方式

vue2的通讯方式：

略(后续有时间再补充吧，大家如果有需要可以先看看vue文档)

vue3的通讯方式：

props
emit
provide/inject
attrs
v-model
vuex
mitt
ref

props 和 emit

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

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

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

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

emit

// 子组件内容
<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) // 测试
}
复制代码

备注：这里需要注意的一点就是有些会有个警告

[Vue warn]: Extraneous non-emits event listeners (changData) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. If the listener is intended to be a component custom event listener only, declare it using the "emits" option.

解决办法：声明下自定义事件名称即可
emits: ['changData']

provide/inject
这两个可以穿越一切界壁，但是不是响应式哟，所以一般在组件中使用的比较多。

// 父组件内容
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.后语

目前这里只列举了几种，后续的后面再补充，如果对你有帮助的话，麻烦按上你的小心心❤️