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

组件通讯及方法互调"/>

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