一、setup函数版本

父传子

1、 父组件传递

• 引入组件 —— 注册组件 —— 使用组件 —— 传递数据
• 通过 :自定义属性名="属性值" 的形式传递数据

<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>

2、 子组件接收

• props接受父传递的数据；
• type属性定义接受的数据类型；
• default属性设置默认值，在当前属性没有值传入时使用；
• props也可定义为props:["le","list"],在此不做演示，用法相同。

<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>

子传父

1、 子组件传值

• setup函数中ctx的emit用于传递事件给父组件
• 第一个参数为要传递的事件名，第一个参数为要传递的值

<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>

2、父组件接收

• 引入组件 —— 注册组件 —— 定义事件 —— 接收并使用传递的值
• 父组件中使用自定义事件接收，自定义事件名称必须与子组件传递的一致(即等号前面名称)
• 等号后面的事件名称可自行定义
• 事件中通过默认参数接收使用子组件传递的值
• setup函数中的事件必须return抛出才能使用

<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>

二、setup语法糖版本

父传子

1、 父组件传值

• 引入组件 —— 使用组件 —— 传递数据
• 通过 :自定义属性名="属性值" 的形式传递数据
• setup语法糖中组件引入后使用，无需注册

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

2、子组件接收

• 通过defineProps（）可接收父组件传递的值；
• type属性定义接受的数据类型；
• default属性设置默认值，在当前属性没有值传入时使用；
• 可通过{ }对数据进行解构

<template>
    <div class="box">
        <div>{{ le }}</div>
        <div v-for="item in list">{{ item }}</div>
    </div>
</template>
<script setup>
//引入defineProps
import { defineProps } from 'vue';
// 通过定义变量接收或解构数据使用，接受的值可直接在setup语法糖中使用
// const props = defineProps({
//     le: {   
//         type: String, // 接收的参数类型
//         default: '默认文字', //默认值
//     },
//     list: {   
//         type: Array, // 接收的参数类型
//         default: [], //默认值
//     }
// })
// console.log(props.le,props.list[2]);
// 解构数据
const { le, list } = defineProps({
    le: {
        type: String, // 接收的参数类型
        default: '默认文字', //默认值
    },
    list: { 
        type: Array, // 接收的参数类型
        default: [], //默认值
    }
})
// 接受的值可直接在setup语法糖中使用
console.log(le, list[2]);
</script>
<style scoped lang="scss"></style>

子传父

1、 子组件传值

• setup语法糖事件定义后可直接使用
• 调用defineEmits并定义要给父组件的方法，数组内可定义多个方法
• 第一个参数为要传递的事件名，第一个参数为要传递的值

<template>
    <div class="box">
        <button @click="giveFather">点击传值给父</button>
    </div>
</template>
<script setup>
// 引入defineEmits
import { reactive, defineEmits } from 'vue';
// 调用defineEmits并定义要给父组件的方法，数组内可定义多个方法，此处不做演示，使用同理
const emits=defineEmits(['giveFather'])
const data = reactive({
    text: '文字',
})
function giveFather() {
    // 第一个参数为要传递的事件名，第一个参数为要传递的值
    emits('giveFather', data.text)
}
</script>
<style scoped lang="scss"></style>

2、父组件接收

• 引入组件 —— 定义事件 —— 接收并使用传递的值
• 父组件中使用自定义事件接收，自定义事件名称必须与子组件传递的一致(即等号前面名称)
• 等号后面的事件名称可自行定义
• 事件中通过默认参数接收使用子组件传递的值
• setup语法糖中组件引入后使用，无需注册

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