Vue3父子组件传值

父组件

<!--
 * @Author: wangyf 1758985226@qq.com
 * @Date: 2023-07-03 15:33:36
 * @LastEditors: wangyf 1758985226@qq.com
 * @LastEditTime: 2023-07-03 16:32:00
 * @FilePath: \fast-vue3\src\pages\fcvalue\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <h1>我是父组件</h1>
    <br />
    <span>子组件传来的值=====》 {{ ziValue }}</span>
    <br />
    <span>---------------------------------------</span>
    <children ref="childrenref" :msg="msg" @getChildren="getChildren" />
    <span>---------------------------------------</span>
    <br />
    <button @click="changeChilren">父组件修改子组件的值</button>
  </div>
</template>

<script setup>
  import { ref } from 'vue';
  import children from './children.vue';
  const msg = ref('我是父组件的值');
  const ziValue = ref('');
  // 父组件调用子组件函数
  const childrenref = ref(null);
  const changeChilren = () => {
    childrenref.value.changeed();
  };
  //子组件调用父组件函数
  const getChildren = (value) => {
    ziValue.value = value;
    console.log(value);
  };
</script>

<style></style>

子组件

<template>
  <div>
    <h1>我是子组件</h1><br />
    <h1> {{ chlidrenValue }}</h1>
    <h1>我是父组件传来的值===》 {{ msg }}</h1>
    <span>我是aaa:{{ aaa }}</span> <br />
    <button @click="changeParent"> 子组件传父组件值</button>
  </div>
</template>

<script setup>
  import { defineProps, ref } from 'vue';
  defineProps({
    msg: {
      type: String,
      default: 'oooo',
    },
  });
  const chlidrenValue = ref('子组件的值');
  const aaa = ref('我是子组件的AAA');
  const emit = defineEmits(['getChildren']);
  const changeParent = () => {
    emit('getChildren', '20000');
    console.log('子组件');
  };
  const changeed = () => {
    aaa.value = '我被父组件改变了';
  };
  defineExpose({ aaa, changeed });
</script>

<style></style>