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>

 

兄弟之间