Let’s brag about it first 3.0 As the name suggests, the operation is as fierce as a tiger, and the face is confused when you look at the bug. Since you have used vue3.0, it must be the same as 2.0. First, you should understand the basic component communication, so today I will take everyone to take a look at vue3 How .0 communicates between components and the method interoperability between components
Write two components first
parent.view
<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. The parent component passes parameters to the child component. This is the same as the vue2.0 version. The custom attribute is bound to the child component label, and then the content of the child component is accepted through pros. However, there is a difference that v can be directly defined on the child component label. -model subcomponents are based on the value of modelValue. If you want to change the modelValue by default in the form of v-mode, you can use v-model:msg to evolve into: msg=""
parent component
<children ref="childrenFn" :value="msg" @children="getChildren"></children>
<!-- <children v-model="msg"></children> -->Subassembly
props: {
modelValue:{
type:String
},
value:{
type:String
}
},2. The idea of passing parameters from a child component to a parent component is the same as that of 2.0, but vue3.0 has added a setup function in which the vue instance cannot be obtained through this, and methods such as $on have been abolished, so it can be structured through the getCurrentInstance method Can only be called in setup or life cycle
parent component
<children ref="childrenFn" :value="msg" @children="getChildren"></children>
const getChildren = (msg)=>{
data.childrenMsg = msg
}Subassembly
setup(props,ctx) {
const { proxy } = getCurrentInstance()
const data = reactive({
data:'子组件数据'
})
const toParent = ()=>{
ctx.emit("children",'传给父组件')
}
return {
...toRefs(data),
toParent
}
}The basic communication between components is completed, but how do the methods between components call each other?
First, let’s look at the data and methods that the parent component calls the child component. Let’s implement it through ref. This is still a little different from 2.0.
The ref value of the parent component code child component should be the same as the value defined below
<children ref="childrenFn" :value="msg" @children="getChildren"></children>
<div @click="changeMsg">传给子组件</div>
const changeMsg = ()=>{
console.log(childrenFn,childrenFn.value,...)
childrenFn.value.toParent()
}Child component operation parent component child component code
setup(props,ctx) {
const { proxy } = getCurrentInstance()
const data = reactive({
data:'子组件数据'
})
const toParent = ()=>{
proxy.$parent.msg = "测试"
// proxy.$parent.changeMsg()
}
return {
...toRefs(data),
toParent
}
}