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

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

先写两个组件吧

parent.vue

<template>
  <children ref="childrenFn" :value="msg" @children="getChildren"></children>
  <div class="main">
    <!-- <children v-model="msg"></children> -->
    <span>来自子组件的数据：{
   
   {childrenMsg}}</span>
    <div @click="changeMsg">传给子组件</div>
  </div>
</template>
<script>
import { setup,defineComponent,reactive,toRefs,ref,getCurrentInstance,nextTick} from "vue"
import children from "./child.vue"
export default defineComponent({
  components:{children},
  name: '',
  setup(){
    const { proxy } = getCurrentInstance()
    let data = reactive({
      msg:"父组件数据",
      childrenMsg:''
    })
    const childrenFn = ref()
    nextTick(()=>{
      console.log(childrenFn.value,"childrenFn")
    })
    const changeMsg = ()=>{
      data.msg = '我被改变了'
      console.log(childrenFn.value.data,"childrenFn")
    }
    const getChildren = (msg)=>{
      data.childrenMsg = msg
    }
    return {
      ...toRefs(data),
      changeMsg,
      childrenFn,
      getChildren
    }
  }

})
</script>

child.vue

<template>
  <div class="hello">
    来自父组件的数据：{
   
   {modelValue}} {
   
   {value}}
    <div @click="toParent">点击给父组件</div>
  </div>
</template>

<script>
import {getCurrentInstance, reactive, toRefs,setup,} from "vue"
export default {
  name: 'HelloWorld',
  props: {
    modelValue:{
      type:String
    },
    value:{
      type:String
    }
  },
  setup(props,ctx) {
    const { proxy } = getCurrentInstance()
    const data = reactive({
      data:'子组件数据'
    })
    const toParent = ()=>{
      ctx.emit("children",'传给父组件')
      proxy.$parent.msg = "测试"
      // proxy.$parent.changeMsg()
    }
    return {
      ...toRefs(data),
      toParent
    }
  }

}
</script>

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

父组件

<children ref="childrenFn" :value="msg" @children="getChildren"></children>
<!-- <children v-model="msg"></children> -->

子组件

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

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

父组件

<children ref="childrenFn" :value="msg" @children="getChildren"></children>

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的值要和下面定义的值一样

<children ref="childrenFn" :value="msg" @children="getChildren"></children>
<div @click="changeMsg">传给子组件</div>


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
    }
  }

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

猜你喜欢