<template>
  <div class="box">
      <!-- 使用组件，通过 :自定义属性名="属性值" 的形式传递数据 -->
      <child :le="text" :list="list"></child>
  </div>
</template>
<script>
// 引入
import { reactive, toRefs, } from 'vue';
// 引入组件
import child from "@/components/child.vue";
export default {
  name: 'AboutView',
  // 注册组件
  components: {
    child
  },
  setup() {
    const data = reactive({
      text: '文字',
      list: [1, 2, 3, 4, 5]
    })
    return {
      // 解构抛出
      ...toRefs(data),
    }
  },
}
</script>
<style scoped lang="scss"></style>

<template>
    <div class="box">
        <div>{{ le }}</div>
        <div v-for="item in list">{{ item }}</div>
    </div>
</template>
<script>
// 引入
import { defineComponent } from 'vue';
// 加上defineComponent()之后,可以获得vue2、vue3的自动提示
export default defineComponent({
    name: 'child',
    //props也可定义为props:["le","list"],在此不做演示，用法相同
    props: {
        le: {
            type: String, // 接收的参数类型
            default: '默认文字', //默认值
        },
        list: {
            type: Array, // 接收的参数类型
            default: []  //默认值
        }
    },
   // props 是一个对象，包含父组件传递给子组件的所有数据。
   // context ：上下文，包括 attrs 、 emit 、slots。
    setup(props, context) {
        console.log(props.le, props.list[0]);
    },
})
</script>
<style scoped lang="scss"></style>

<template>
    <div class="box">
        <button @click="giveFather">点击传值传给父</button>
    </div>
</template>
<script>
// 引入
import { reactive, defineComponent } from 'vue';
// 加上defineComponent()之后,可以获得vue2、vue3的自动提示
export default defineComponent({
    name: 'child',
    // props 是一个对象，包含父组件传递给子组件的所有数据。
    // ctx ：上下文，包括 attrs 、 emit 、slots。
    setup(props, ctx) {
        const data = reactive({
            text: '文字',
        })
        function giveFather() {
            // ctx中的emit用于传递事件给父组件
            // 第一个参数为要传递的事件名，第一个参数为要传递的值
            ctx.emit('giveFather', data.text)
        }
        return {
            // setup函数中定义事件需要抛出才能使用
            giveFather
        }
    },
})
</script>
<style scoped lang="scss"></style>

<template>
  <div class="box">
    <!-- 父组件中使用自定义事件接收，自定义事件名称必须与子组件传递的一致(即等号前面名称) -->
    <!-- 等号后面的事件名称可自行定义 -->
    <child @giveFather="receiveSon"></child>
    <div>{{ cont }}</div>
  </div>
</template>
<script>
// 引入
import { reactive, toRefs } from 'vue';
// 引入组件
import child from "@/components/child.vue";
export default {
  name: 'AboutView',
  // 注册组件
  components: {
    child
  },
  setup() {
    const data = reactive({
      cont: '',
    })
    function receiveSon(e) {
      // 通过默认参数接收使用子组件传递的值
      console.log(e);
      data.cont = e
    }
    return {
      // 解构抛出
      ...toRefs(data),
      // 抛出事件
      receiveSon
    }
  },
}
</script>
<style scoped lang="scss"></style>