9-父子组件传值

 

<template>
  <test1 ref="menus" :data="list" title="传递文本" @clickTab="getList" @clickTab2="getTab"></test1>
</template>

<script setup lang="ts">
  import { reactive, toRaw, ref } from 'vue';
  import test1 from './test1.vue'
  const list = reactive<number[]>([1, 2, 3])

  const menus = ref(null) //和ref名称要保持一直

   const getList = (list:number[]) => {
    console.log(list, '我是子组件传过来的list', toRaw(list))
   }

   const getTab = (bool:boolean) => {
    console.log(bool, 'boolean状态')
    console.log(menus, '获取menus')
   }

</script>

<style lang="less" scoped>

</style>


<template>
  <div>{{ title }}</div>
  <div>{{data}}</div>
  <div><button @click="clickTab">子组件向父组件传值</button></div>
  <div><button @click="clickTab2">子组件向父组件传值2</button></div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';

  type Props = {
    title?: string,  //?可传可不传值
    data?: number[], //?可传可不传值
  }
  withDefaults(defineProps<Props>(), {
    title: '我是默认值',
    data: () => [1, 1, 1]
  })
  //defineProps<Props>()  //子组件接收父组件的传值

  const list = reactive<number[]>([1, 2, 3])
  const emit = defineEmits(['clickTab', 'clickTab2']) //子组件向父组件传值
  const clickTab = () => {
    emit('clickTab', list)
  }
  const clickTab2 = () => {
    emit('clickTab2', true)
  }

  defineExpose({
    list
  })

</script>

<style lang="less" scoped>

</style>