vue3父传子，子传父

 

<template>
  <div>
    <p>我是父组件</p>
    <p>111111111111111</p>
    <headrt :info="context" @clickSon="clickFu"></headrt>
    {{value}}
  </div>
</template>

<script lang='ts'>
import { defineComponent, ref, reactive } from "vue";
import headrt from "../components/Headrt.vue";
export default defineComponent({
  components: { headrt },
  setup() {
    const context = reactive({
      name: "小jia",
      like: ["猫咪", "小pei"],
    });
    const value = ref("");
    function clickFu(data: any) {
      console.log(data);
      value.value = data;
    }
    return {
      context,
      clickFu,
      value,
    };
  },
});
</script>

<template>
  <div>
    <p>我是子组件</p>
<div class="headrt">你是{{info.name}}......</div>
<p><el-button type="primary" @click="clickSon">点击</el-button></p>
  </div>
</template>

<script lang="ts">
import {defineComponent,ref} from 'vue';
export default defineComponent({
  props:['info'],
    setup(props,context) {
        console.log(props.info);//可以拿到父组件的数据
        const info=props.info
        console.log(info);
        info.name='小明'
        console.log(info.like[0]);
        function clickSon(){
            console.log(context);
            context.emit('clickSon','猪是你')
        }
        return{clickSon}
    }
})
</script>