Vue3组件间如何通讯-内江站浩晨众云

新闻中心

这里有您想知道的互联网营销解决方案

Vue3组件间如何通讯

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

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

Vue3组件间如何通讯

本文讲解 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
父组件需要使用