您好,登录后才能下订单哦!
这篇“Vue3组件间的通信方式是什么”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“Vue3组件间的通信方式是什么”文章吧。
父子组件通信我们第一个想到的就是props,我们在子组件显示声明所接受的props,然后我们在从父组件传入对应的 key与value, 这样我们就可以在子组件上接收到父组件传过来的属性与值。
具体实现如下:
// children.vue <template> <ul class="list-group"> <li class="list-group-item" v-for="item in list" :key="index"> {{item}} </li> </ul> </template> <script setup> import { defineProps } from 'vue'; const props = defineProps({ list :{ type: Array, default: () => {} } }) </script>
// parent.vue <template> <div class="parent-wrap"> <input type="text" v-model="value" class="form-control" placeholder="请输入"> <div class="input-group-append"> <button class="btn btn-primary" @click="handleAdd">添加</button> </div> </div> <!-- child --> <childrenVue :list="list"></childrenVue> </template> <script setup> import { ref } from 'vue'; import childrenVue from './children.vue'; const value = ref('') const list = ref(['javaScript', 'Html', 'CSS']) const handleAdd = () =>{ list.value.push(value.value) value = '' } </script>
如上图所示,我们既实现了在子组件上显示了父组件传过来的 list 数组,还使可以向list添加数据使子组件数据更新。
当我们聊完了props,我们第二个要介绍的就是 vue3 的一个组合式选项 provide 和inject。
projct用于提供可以被后代组件注入的值,而inject用于声明要通过从上层提供方匹配并注入进当前组件的属性。 其代码实现如下:
// children.vue <template> <ul class="list-group"> <li class="list-group-item" v-for="item in list" :key="item">{{item}}</li> </ul> </template> <script setup> import { inject } from 'vue'; const list = inject('list') </script>
// parent.vue <template> <div class="parent-wrap"> <input type="text" v-model="value" class="form-control" placeholder="请输入"> <div class="input-group-append"> <button class="btn btn-primary" @click="handleAdd">添加</button> </div> </div> <!-- child --> <childVue /> </template> <script setup> import childVue from "./child.vue"; const { ref, provide, readonly } = require("vue"); const value = ref('') const list = ref(['javaScript', 'HTML', 'CSS']) provide('list', readonly(list.value)) const handleAdd = () => { list.value.push(value.value) } </script>
如上图所示,我们使用 provide
API向外提供了一个 key 为 list
,值为list.value
,同时将 list,value
设置成了只读属性,防止子组件修改父组件的数据源。然后我们 inject
API接收了 list
,实现了父子组件的通信。
上面我介绍了两种父向子传值的方法,但在我们开发中,我们还会遇到子向父组件传值的情况,那我们该怎么解决呢? 第一个方法就是vue3中的 defineEmits
API,代码实现如下:
// children.vue <template> <div class="parent-wrap"> <input type="text" v-model="value" class="form-control" placeholder="请输入" /> <div class="input-group-append"> <button class="btn btn-primary" @click="handleAdd">添加</button> </div> </div> </template> <script setup> const { ref, defineEmits } = require("vue"); const value = ref('') const emits = defineEmits(['add']) //父传子 // 给父组件传一个函数 const handleAdd = () => { emits('add', value.value) value.value= '' } </script>
// parent.vue <template> <childVue @add='handleAdd'/> <ul class="list-group"> <li class="list-group-item" v-for="item in list" :key="item">{{item}}</li> </ul> </template> <script setup> import { ref } from '@vue/reactivity'; import childVue from './child.vue'; const list = ref(['javaScript', 'HTML', 'CSS']) const handleAdd = (val) => { list.value.push(val) } </script>
如上图所示,我们在子组件上emit
一个出了一个 add事件给父组件接收,同时在父组件上调用来执行添加的逻辑,再将 input
的value
变为空,实现了父组件向子组件传参。
在介绍完 defineEmits
后, 我们再来介绍一种与其有异曲同工之处的v-model:xxx + emit
的方法,实现如下:
// children.vue <template> <div class="parent-wrap"> <input type="text" v-model="value" class="form-control" placeholder="请输入" /> <div class="input-group-append"> <button class="btn btn-primary" @click="handleAdd">添加</button> </div> </div> </template> <script setup> const { ref, defineProps, defineEmits } = require("vue"); const value = ref('') const props = defineProps({ list: { type: Array, default: () => [] } }) const emits = defineEmits(['list']) // 给父组件一点东西 const handleAdd = () => { // props.list.push(value.value) //不建议直接修改props的值 把握不住数据源的流转 const arr = props.list arr.push(value.value) emits('list', arr) value.value= '' } </script>
<template> <childVue v-model:list="list" @list ='add'/> <ul class="list-group"> <li class="list-group-item" v-for="item in list" :key="item">{{item}}</li> </ul> </template> <script setup> import { ref } from '@vue/reactivity'; import childVue from './child.vue'; const list = ref(['javaScript', 'HTML', 'CSS']) const add =(val) => { console.log(val); console.log(list); } </script>
再和上面的defineEmits
方法比较完以后,相信大家也看出了这两者的异曲同工在哪了。我们这里是先将父组件的list
传给了子组件,再在子组件修改了父组件的数据源,同时再emit
还给父组件,实现了子组件向父组件传值。
以上就是关于“Vue3组件间的通信方式是什么”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。