Vue2/3 父子组件传值

    // 2.2.@opParent必须和子组件一样
    <Son ref="SonRef" @opParent="parentMethod">Son>
    // 2.1.方法
    <button @click="opSon">button>

    我是父组件传的参数{{ msg }}
    "opParent">我要调用父组件方法

Vue3

1.子组件获取父组件

{{ msg }}
<script>
import { ref, defineProps } from 'vue'
 
const props = defineProps({
    msg: {
        type: String,
        default: ""
    }
})
script>

1.1父组件传给子组件

    <Son :msg="myMsg">Son>
<script>
import Son from './Son.vue'
import { ref } from 'vue'
 
const myMsg = ref("我是父组件传的值");
 
script>

2.1父组件调用子组件方法

<script>
import { ref, defineProps, defineExpose } from 'vue'
 
const props = defineProps({
    msg: {
        type: String,
        default: ""
    }
})
 
const msg2 = ref("");
 
const ParentOpSon = (parentMsg) => {
    console.log("父组件的参数", parentMsg);
}
 
// 导出方法父组件才能用
defineExpose({
    ParentOpSon
})
 
script>
 
 
<div>
    <Son ref="sonRef">Son>
    <button @click="opSon">传给子组件方法button>
div>
 
<script>
import Son from './Son.vue'
import { ref } from 'vue'
 
const sonRef = ref();
const opSon = () => {
    sonRef.value.ParentOpSon("传给子组件的参数");
}
 
script>

2.2.子组件调用父组件方法

<div>
    <button @click="opParent">调用父组件方法button>
div>
<script>
 
const emit = defineEmits();
 
// 子组件调用父组件方法
const opParent = () => {
    emit("opParent","调用父组件方法");
}
 
 
 
script>
 
<div>
    <Son ref="sonRef" @opParent="parentMethod ">Son>
    <button @click="opSon">传给子组件方法button>
div>
 
<script>
import Son from './Son.vue'
import { ref } from 'vue'
 
const parentMethod = (e) => {
    console.log(e);
}
 
script>