vue3.0组件通讯及方法互调

先吹吹牛逼吧 3.0 顾名思义 一顿操作猛如虎 一看bug一脸懵逼 既然使用了vue3.0 肯定是和2.0一样 首先把基础的组件通讯给搞明白了 所以 今天就带着大家来看看 vue3.0是怎么进行组件通讯的以及组件之间的方法相互操作 

先写两个组件吧 

parent.vue

child.vue

1. 父组件给子组件传参 这个和vue2.0的版本一样 在子组件标签上绑定自定义属性 然后子组件内容部通过pros接受  不过有一点不一样的就是 子组件标签上面可以直接定义v-model 子组件内部的话 以modelValue的值为基础 如果以v-mode的形式 要想默认改变modelValue 就以v-model:msg 从而就演变成了 ：msg=“”

父组件

子组件

props: {
    modelValue:{
      type:String
    },
    value:{
      type:String
    }
 },

2.子组件给父组件传参 和2.0的思路是一样的  但vue3.0新增了setup函数 里面通过this是获取不到vue实例的 而且已废除了$on等方法 所以可以通过getCurrentInstance方法结构出  只能在setup或者生命周期中调用

父组件

const getChildren = (msg)=>{
    data.childrenMsg = msg
}

子组件 

setup(props,ctx) {
    const { proxy } = getCurrentInstance()
    const data = reactive({
      data:'子组件数据'
    })
    const toParent = ()=>{
      ctx.emit("children",'传给父组件')
    }
    return {
      ...toRefs(data),
      toParent
    }
  }

组件之间的基本通讯完成了 但是组件之间的方法是如何相互调用呢

首先 先看下父组件调用子组件的数据及方法吧 通过ref来实现 这是和2.0还是有一点点的差异的

父组件代码 子组件的ref的值要和下面定义的值一样

传给子组件


const changeMsg = ()=>{
   console.log(childrenFn,childrenFn.value,...)
   childrenFn.value.toParent()
}

子组件操作父组件 子组件代码

setup(props,ctx) {
    const { proxy } = getCurrentInstance()
    const data = reactive({
      data:'子组件数据'
    })
    const toParent = ()=>{
      proxy.$parent.msg = "测试"
      // proxy.$parent.changeMsg()
    }
    return {
      ...toRefs(data),
      toParent
    }
  }