注册组件
全局组件
局部组件
递归组件
组件通信
父传子
父传递
<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>
子传父:emits传递和ref传递
emits传递
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>
emits传递 父接收
<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>
通过ref传递
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>
ref传递 父接收
<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>