vue3注册组件，以及组件之间通信
注册组件
全局组件
Global组件,这里用了TS和默认值
创建Global组件
// Global.vue <template> <h3>Global component</h3> <div>{{ msg }}</div> </template> <script setup lang="ts"> export interface Props{ msg:string } let defaulProps = withDefaults(defineProps<Props>(),{ msg:'default msg' }) </script> <style scoped> </style>
注册全局组件
// main.js import { createApp } from 'vue' import './style.css' import App from './App.vue' import Global from './components/Global.vue' let app = createApp(App); app.component('Global',Global); app.mount('#app');
引用全局组件
<Global msg="set message"></Global> <Global></Global>
局部组件
递归组件
组件通信
父传子
父传递
<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>
