本篇内容主要讲解“Vue3组件间如何通讯”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Vue3组件间如何通讯”吧!

创新互联是一家专注于做网站、网站建设与策划设计,眉山网站建设哪家好?创新互联做网站,专注于网站建设10余年,网设计领域的专业建站公司;建站业务涵盖:眉山等地区。眉山做网站价格咨询:18980820575

本文讲解 Vue 3.2 组件多种通讯方式的基础用法，并且使用了  单文件组件

子组件

// Child.vue





const props = defineProps({
  msg: {
    type: String,
    default: ''
  }
})

console.log(props.msg) // 在 js 里需要使用 props.xxx 的方式使用。在 html 中使用不需要 props

在

子组件

// Child.vue





// 注册一个自定义事件名，向上传递时告诉父组件要触发的事件。
const emit = defineEmits(['changeMsg'])

function handleClick() {
  // 参数1：事件名
  // 参数2：传给父组件的值
  emit('changeMsg', '鲨鱼辣椒')
}

和 props 一样，在

子组件

// Child.vue




import { ref } from 'vue'

const message = ref('蟑螂恶霸')

function changeMessage(data) {
  message.value = data
}

使用 defineExpose 向外暴露指定的数据和方法
defineExpose({
  message,
  changeMessage
})

在

子组件

// Child.vue

打开控制台可以看到，属性被挂到 HTML 元素上了。

多个元素的情况

但在 Vue3 中，组件已经没规定只能有一个根元素了。如果子组件是多个元素时，上面的例子就不生效了。

// Child.vue

此时可以使用 $attrs 的方式进行绑定。

// Child.vue

v-model

v-model 是 Vue 的一个语法糖。在 Vue3 中的玩法就更多(晕)了。

单值的情况

组件上的 v-model 使用 modelValue 作为 prop 和 update:modelValue 作为事件。

v-model 参数文档

https://v3.cn.vuejs.org/guide/component-custom-events.html#v-model-%E5%8F%82%E6%95%B0

父组件

// Parent.vue




import { ref } from 'vue'
import Child from './components/Child.vue'

const message = ref('雷猴')

子组件

// Child.vue




import { ref } from 'vue'

// 接收
const props = defineProps([
  'modelValue' // 接收父组件使用 v-model 传进来的值，必须用 modelValue 这个名字来接收
])

const emit = defineEmits(['update:modelValue']) // 必须用 update:modelValue 这个名字来通知父组件修改值

function handleClick() {
  // 参数1：通知父组件修改值的方法名
  // 参数2：要修改的值
  emit('update:modelValue', '喷射河马')
}

你也可以这样写，更加简单

子组件

// Child.vue




import { ref } from 'vue'

// 接收
const props = defineProps([
  'modelValue' // 接收父组件使用 v-model 传进来的值，必须用 modelValue 这个名字来接收
])

多个 v-model 绑定

多个 v-model 绑定 文档

https://v3.cn.vuejs.org/guide/component-custom-events.html#%E5%A4%9A%E4%B8%AA-v-model-%E7%BB%91%E5%AE%9A

父组件

// Parent.vue




import { ref } from 'vue'
import Child from './components/Child.vue'

const message1 = ref('雷猴')

const message2 = ref('蟑螂恶霸')

子组件

// Child.vue




import { ref } from 'vue'

// 接收
const props = defineProps({
  msg1: String,
  msg2: String
})

const emit = defineEmits(['update:msg1', 'update:msg2'])

function changeMsg1() {
  emit('update:msg1', '鲨鱼辣椒')
}

function changeMsg2() {
  emit('update:msg2', '蝎子莱莱')
}

v-model 修饰符

v-model 还能通过 . 的方式传入修饰。

v-model 修饰符 文档

https://v3.cn.vuejs.org/guide/component-custom-events.html#%E5%A4%84%E7%90%86-v-model-%E4%BF%AE%E9%A5%B0%E7%AC%A6

父组件

// Parent.vue




import { ref } from 'vue'
import Child from './components/Child.vue'

const message = ref('hello')

子组件

// Child.vue




import { ref, onMounted } from 'vue'

const props = defineProps([
  'modelValue',
  'modelModifiers'
])

const emit = defineEmits(['update:modelValue'])

onMounted(() => {
  // 判断有没有 uppercase 修饰符，有的话就执行 toUpperCase() 方法
  if (props.modelModifiers.uppercase) {
    emit('update:modelValue', props.modelValue.toUpperCase())
  }
})

插槽 slot

插槽可以理解为传一段 HTML 片段给子组件。子组件将 元素作为承载分发内容的出口。

插槽 文档

https://v3.cn.vuejs.org/guide/component-slots.html

本文打算讲讲日常用得比较多的3种插槽：默认插槽、具名插槽、作用域插槽。

默认插槽

插槽的基础用法非常简单，只需在 子组件中使用 标签，就会将父组件传进来的 HTML 内容渲染出来。

默认插槽 文档

https://v3.cn.vuejs.org/guide/component-slots.html#%E6%8F%92%E6%A7%BD%E5%86%85%E5%AE%B9

父组件

// Parent.vue

子组件

// Child.vue

具名插槽

具名插槽就是在 默认插槽的基础上进行分类，可以理解为对号入座。

具名插槽 文档

https://v3.cn.vuejs.org/guide/component-slots.html#%E5%85%B7%E5%90%8D%E6%8F%92%E6%A7%BD

父组件

// Parent.vue



    鲨鱼辣椒
  

子组件

// Child.vue

父组件需要使用