vue3父子组件传值

vue3父子组件传值

子组件 通过 defineProps 接收值，通过defineEmits 注册事件，去更改值

父组件：

<template>
     <g-modal v-model="dialogShow" append-to-body title="这是一个对话框" :btns="btnsModal" type="dialog">
        这是对话框的内容
         <div style="background-color:blue">我是父组件</div>
          <br/><br/>
        <child v-model:titleModal="title" @myClick="getChild" ref="childRef" />
    </g-modal>
</template>


<script lang="tsx" setup>
import { ref, reactive, onBeforeMount, watch, onMounted} from 'vue'
import child from '../child/index.vue'



//传给子组件的值
const title = ref('父组件传给子组件的title值')

//通过事件接收子组件传递的值
const getChild = (e) => {
    console.log(e,'子组件的传值')
}

// 获取子组件的值和方法
const childRef = ref(null)
onMounted(() => {
    console.log(childRef.value,'子组件的传值')
    childRef.value.childFunc()
})


</script>

子组件：

<template>
    <!-- <input v-model='titleModal' type='text'> -->
    <!-- <input v-model='message' placeholder='edit me' />
    <p>Message is: {{ message }}</p> -->
    <h1 style='background-color:red' @click='childClick'>{{ titleModal }}  ————-————  子组件显示XXXXXX</h1>
    <button @click='updateFunc'>修改父组件传递的值</button>
</template>
<script setup>
import { defineProps, defineEmits, defineExpose } from 'vue'
defineProps({
    //定义子组件需要接收的值
    titleModal: {
        type: String,
        default: ''
    }
})


// 注册事件
const emit = defineEmits(['myClick', 'update:titleModal'])

// 传给父组件的值
const childClick = () => {
    emit('myClick', '子组件通过事件传给父组件的参数')
}

//修改父组件传的值
const updateFunc = () => {
    emit('update:titleModal', '子组件修改的新标题')
}
//向父组件传递子组件的值和方法
// defineExpose({
//     childValue: '子组件的值',
//     childFunc() {
//         console.log('子组件的方法')
//     }
// })
</script>