[JavaScript知识库]3.vue3.2的父传子defineProps，子传父emits以及ref

1.父传子

<template>
  <div class="container">
     <!-- 传递数据 这里传了一个string 和 一个list -->
    <Hello title="我是hello的爸爸" :list='list'/>
    <hr>
    <h4>子组件传数据过来了 {{fromSon}}</h4>
  </div>
</template>

<script setup>
import { reactive, toRefs } from 'vue'
//导入子组件
import Hello from '@/components/HelloWorld'
const list = reactive([
  { id: 1, name: '哈哈哈' },
  { id: 2, name: '嘿嘿嘿' },
  { id: 3, name: '呵呵呵' },
])
</script>

子接收

<template>
  <div class="container">
    我是Hello
    <h5>父组件传了一句话过来 String---- {{title}}</h5>
    <h5>父组件传了一个数组过来 Array --- {{list}}</h5>
  </div>
</template>
<script setup>
import { reactive, toRefs } from 'vue'
    // 通过defineProps接收，之后直接声明
    defineProps({
      title:String,
      list:Array
    })
</script>

2.子传父 emits传递

<template>
  <div class="container">
    <button @click="clickTap">点击这里给父组件传递些许数据</button>
  </div>
</template>
<script setup>
import { reactive, toRefs } from 'vue'

// 这里可以传递多个值
  const list = reactive([1,2,3,4])
  // defineEmits内跟一个数组，数据内写绑定的事件
  const emit = defineEmits(['on-click'])
  //进行数据传递
  const clickTap = () => {
    emit('on-click',list,true)
  }
</script>

父接收

<template>
  <div class="container">
    <!-- 传递数据 这里传了一个string 和 一个list -->
    <Hello @on-click="getList" />
    <hr>
    <h4>子组件传数据过来了 {{fromSon}}</h4>
  </div>
</template>

<script setup>
import { reactive, toRefs } from 'vue'
import Hello from '@/components/HelloWorld'

const fromSon = reactive([])
const getList = (list,flag) => {
  // 这里不能直接复制，会破坏双休绑定数据
  fromSon.push(...list) 
  console.log(flag);
  console.log('子组件传过来的值',list);
}
</script>

<style lang="scss" scoped>
    
</style>

3.子传父 通过ref传递

<template>
  <div class="container">
    <button @click="clickTap">点击这里给父组件传递些许数据</button>
  </div>
</template>

<script setup>
import { reactive, toRefs } from 'vue'
// 这里可以传递多个值
const list = reactive([1,2,3,4])
// defineEmits内跟一个数组，数据内写绑定的事件
const emit = defineEmits(['on-click'])
const clickTap = () => {
  emit('on-click')
}
// 暴露出list
defineExpose({
  list
})
</script>

父接收

<template>
  <div class="container">
    <!-- 传递数据 这里传了一个string 和 一个list -->
    <Hello ref="menus" @on-click="getList" />
  </div>
</template>

<script setup>
import { reactive, toRefs,ref } from 'vue'
import Hello from '@/components/HelloWorld'

// 还可以通过ref进行字传父
const menus = ref(null)    
    
const getList = (list,flag) => {
  console.log(menus.value);
}
</script>