vue3组件通信

1.父传子props

Parent.vue

<template>
  这里是父组件的数据:{{person}},{{arr.list}} <br>
  <Child :person="person" :list="arr.list"></Child>
</template>

<script setup lang="ts">
/**
 * vue3的版本是3.2.3x(npm list vue 查看vue版本)
 * 这里在 script标签里直接写上 setup,
 * 后面就不要 就无须 export default {},也无须return {},
 * 就意味着定义的数据,方法等自动会导出,
 * 同时我们所 import导入的方法可以在template模板中使用
 * */
import {reactive} from "vue";
import Child from '@/views/components/Child.vue'
// 这里既没有 setup()
const person = reactive({
  name: '张三',
  age: 18
})
const arr = reactive({
  list:[1,2,3,4]
})
// 也没有return{}
</script>

<style scoped>

</style>

Child.vue

<template>
  这里是子组件,接收父组件传过来的数据:{{ props.person }},{{ props.list }}
</template>

<script setup lang="ts">
import {defineProps} from "vue";
// props 需要使用到 defineProps 来定义
const props = defineProps({
  person: {
    type: Object,
    default: {}
  },
  list: {
    type: Array,
    default: []
  }
})
</script>

<style scoped>

</style>

界面展示:

2.子传父 emit

Child.vue

<template>
  这里是子组件数据: {{val}},{{ obj.person }}
  <el-button @click="handleClick">点击将数据传给父组件</el-button>
</template>

<script setup lang="ts">
import {reactive, ref,defineEmits} from 'vue'

const val = ref('hello')
const obj = reactive({
  person:{
    name: '李四',
    age: 20
  }
})

// emit 使用 defineEmit 定义组件可以发出的事件
const emit = defineEmits(['myEmit1'])
const handleClick = () => {
  emit('myEmit1',val,obj,'这是传给父组件的数据')
}
</script>

<style scoped>

</style>

Parent.vue

<template>
  父组件接收子组件的数据:{{ val }},{{ obj.person }}<br>
  <Child @myEmit1="onMyEmit1"></Child>
</template>

<script setup lang="ts">
import Child from '@/views/components/Child.vue'
import {reactive, ref} from "vue";
import {ElMessage} from "element-plus";

let val = ref('')
let obj = reactive({
  person: {}
})
const onMyEmit1 = (a, b, msg) => {
// 打印 a 和 b,显示出来的a,b都是响应式数据,所以在子组件修改了值,同时父组件也会修改的
  val.value = a
  obj.person = b.person
  ElMessage.success(msg)
}
</script>

<style scoped>

</style>

效果

3. provide / inject

Parent.vue

<template>
  <Child></Child>
</template>

<script setup lang="ts">
import Child from '@/views/components/Child.vue'
import {provide, reactive} from "vue";

const obj = reactive({
  person: {
    name: '王五',
    age: 20
  }
})
// 这里使用provide 将数据向后代组件传递,无论是多少代的后代组件均可以传递
provide('person', obj.person)
</script>

<style scoped>

</style>

Child.vue

<template>
  传过来的数据是:{{ person.name }},{{ person.age }}
</template>

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

// 这里使用inject接收provide传递的数据,无论多少代的后代组件均可以接收
const person = inject('person')

</script>

<style scoped>

</style>

4. attrs

Parent.vue

<template>
  <Child :val="val" :person="obj.person" msg="传递出去的信息"></Child>
</template>

<script setup lang="ts">
import Child from '@/views/components/Child.vue'
import {reactive, ref} from "vue";
const val = ref('hello')
const obj = reactive({
  person:{
    name:'张三',
    age:18
  }
})

</script>

<style scoped>

</style>

Child.vue

<template>
</template>

<script setup lang="ts">
import {defineProps, useAttrs} from "vue";

const props = defineProps({
  val: {
    type: String,
    default: ''
  }
})
const attrs = useAttrs()
/**
 * 这里打印 person:{},传递出去的信息
 * 父组件传递了三个数据,为什么只打印两个?
 * 因为在上面我定义了 defineProps,
 * 所以使用attrs传递数据,在子组件中只能接受 非 defineProps的数据
 * */
console.log(attrs)

</script>

<style scoped>

</style>

5. expose/ref

Parent.vue

<template>
  <Child ref="child"></Child>
  <el-button @click="handleClick">点击</el-button>
</template>

<script setup lang="ts">
import Child from '@/views/components/Child.vue'
import {ref} from 'vue'
const child = ref(null)
const handleClick = () => {
  console.log(child.value.childData) // 获取子组件对外暴露的属性
  child.value.childMethod() // 调用子组件对外暴露的方法
}

</script>

<style scoped>

</style>

Child.vue

<template>
</template>

<script setup lang="ts">
import {defineExpose} from "vue";
import {ElMessage} from "element-plus";

// 使用defineExpose将子组件的数据,方法等暴露出去给父组件使用
defineExpose({
  childData:'这里是子组件的数据',
  childMethod(){
    ElMessage.success('这里是子组件的方法')
  }
})

</script>

<style scoped>

</style>

以上内容参考:https://www.jb51.net/article/223816.htm#_lab2_1_5