vue组件通信几种方式,vue3.0组件通信
本文将详细介绍Vue3中组件的以下七种通信方式：props、emit、v-model、refs、provide/inject、eventBus、vuex/pinia(状态管理工具)。有兴趣的可以了解一下。
目录
写在前面。举个栗子Props模式emit模式v-model模式refs模式provide/inject模式事件总线状态管理工具的例子。
写在前面
本文采用脚本设置，组合API，比option API更自由。具体请参考Vue文档中对这两种方式的描述。
本文将介绍以下七种组件通信模式：
PropSemitv-ModelRefSprovide/InjectEventBusVuex/PINIA(状态管理工具)开始做事啦~
举一个栗子
俗话说不学会写demo就是耍流氓~
本文将重点介绍如下演示，如下图所示：
在上图中，列表和输入框分别是父子组件。根据值传递的方式不同，可能会调整谁是父组件，谁是子组件。
Props方式
道具法是Vue中最常见的亲子传播方式，使用起来也比较简单。
根据上面的演示，我们在父组件中定义数据和对数据的操作，子组件只渲染列表；
父组件代码如下：
模板
！-子组件-
子组件：list= list /子组件
！-父组件-
div class=child-wrap输入组
投入
v-model=值
type=text
窗体-控件
Placeholder=请输入
/
div class=输入-组-追加
button @ click= handle add class= BTN BTN-primary type= button
增加
/按钮
/div
/div
/模板
脚本设置
从“vue”导入{ ref }
从导入子组件。/child.vue
const list=ref([JavaScript ， HTML ， CSS])
常数值=ref( )
//触发后添加事件处理程序
const handleAdd=()={
list.value.push(值.值)
value.value=
}
/脚本
子组件只需要呈现父组件传递的值。代码如下：
模板
ul class=父列表-组
Li class= list-group-item v-for= I in poops . list :key= I { { I } }/Li
/ul
/模板
脚本设置
从“vue”导入{ defineProps }
const poops=defineProps({
列表：{
类型：数组，
默认值：()=[]，
},
})
/脚本
emit方式
Emit模式也是Vue中最常见的组件通信模式，用于子组件传递给父组件；
根据上面的演示，我们在父组件中定义列表，子组件只需要传递添加的值。
子组件代码如下：
模板
div class=child-wrap输入组
投入
v-model=值
type=text
窗体-控件
Placeholder=请输入
/
div class=输入-组-追加
button @ click= handle submit class= BTN BTN-primary type= button
增加
/按钮
/div
/div
/模板
脚本设置
从“vue”导入{ ref，defineEmits }
常数值=ref( )
const emisses=define emits([ add ])
const handleSubmit=()={
发出( add ，value.value)
value.value=
}
/脚本
单击子组件中的[Add]来发出一个自定义事件，并将添加的值作为参数传递。
父组件代码如下：
模板
！-父组件-
ul class=父列表-组
Li class= list-group-item v-for= I in list :key= I { { I } }/Li
/ul
！-子组件-
child-components @ add= handle add /child-components
/模板
脚本设置
从“vue”导入{ ref }
从导入子组件。/child.vue
const list=ref([JavaScript ， HTML ， CSS])
//触发后添加事件处理程序
const handleAdd=value={
list.value.push(值)
}
/脚本
在父组件中，只需要监听子组件定义的事件，然后执行相应的添加操作。
v-model方式
V-model是Vue中优秀的语法糖，比如下面的代码。
child component v-model:title= page title /
这是下面代码的简写情况
子组件：title= page title @ update:title= page title=$ event /
v型车确实简便了不少，现在我们就来看一下上面那个演示，如何用v型车实现。
子组件
模板
div class=" child-wrap输入组
投入
v-model=值
type=text
class=窗体-控件
占位符=请输入
/
div class=输入-组-追加
按钮@ click=处理添加 class= BTN BTN-小学类型=按钮
添加
/按钮
/div
/div
/模板
脚本设置
从“vue”导入{ ref，defineEmits，defineProps }
常数值=ref( )
const props=defineProps({
列表：{
类型：数组，
默认值：()=[],
},
})
const emisses=define emisses([ update:list ])
//添加操作
const handleAdd=()={
const arr=props.list
数组推送(值。值)
发出(“更新：列表”，arr)
value.value=
}
/脚本
在子组件中我们首先定义小道具和发射，然后添加完成之后发射指定事件。
注:更新：*是某视频剪辑软件中的固定写法，*表示小道具中的某个属性名。
父组件中使用就比较简单，代码如下：
模板
！-父组件-
ul class=父列表-组
Li class= list-group-item v-for= I in list :key= I { { I } }/Li
/ul
！-子组件-
子组件v-model:list= list /子组件
/模板
脚本设置
从“vue”导入{ ref }
从导入子组件 child.vue
const list=ref([JavaScript ， HTML ， CSS])
/脚本
refs方式
在使用选项式应用程序接口时，我们可以通过这个. refs.name的方式获取指定元素或者组件，但是组合式应用程序接口中就无法使用哪种方式获取。如果我们想要通过裁判员的方式获取组件或者元素，需要定义一个同名的裁判员对象，在组件挂载后就可以访问了。
示例代码如下：
模板
ul class=父列表-组
Li list-group-item v-for= I in childRefs？ list :key=i
{{ i }}
/李
/ul
！-子组件裁判员的值与脚本中的保持一致-
子组件ref=子引用/子组件
！-父组件-
/模板
脚本设置
从“vue”导入{ ref }
从导入子组件 child.vue
const childRefs=ref(null)
/脚本
子组件代码如下：
模板
div class=" child-wrap输入组
投入
v-model=值
type=text
class=窗体-控件
占位符=请输入
/
div class=输入-组-追加
按钮@ click=处理添加 class= BTN BTN-小学类型=按钮
添加
/按钮
/div
/div
/模板
脚本设置
从“vue”导入{ ref，defineExpose }
const list=ref([JavaScript ， HTML ， CSS])
常数值=ref( )
//添加触发后的事件处理函数
const handleAdd=()={
列表.值.推送(值。值)
value.value=
}
defineExpose({ list })
/脚本
设置组件默认是关闭的，也即通过模板裁判员获取到的组件的公开实例，不会暴露任何在* *脚本设置中声明的绑定。如果需要公开需要通过****定义公开**** API暴露**。
provide/inject方式
提供和注射是某视频剪辑软件中提供的一对API，该应用程序接口可以实现父组件向子组件传递数据，无论层级有多深，都可以通过这对应用程序接口实现。示例代码如下所示：
父组件
模板
！-子组件-
子组件/子组件
！-父组件-
div class=" child-wrap输入组
投入
v-model=值
type=text
class=窗体-控件
占位符=请输入
/
div class=输入-组-追加
按钮@ click=处理添加 class= BTN BTN-小学类型=按钮
添加
/按钮
/div
/div
/模板
脚本设置
从“vue”导入{参考，提供}
从导入子组件 child.vue
const list=ref([JavaScript ， HTML ， CSS])
常数值=ref( )
//向子组件提供数据
提供( list ，list.value)
//添加触发后的事件处理函数
const handleAdd=()={
列表.值.推送(值。值)
value.value=
}
/脚本
子组件
模板
ul class=父列表-组
Li class= list-group-item v-for= I in list :key= I { { I } }/Li
/ul
/模板
脚本设置
从“vue”导入{ inject }
//接受父组件提供的数据
const list=inject(list )
/脚本
事件总线
事件总线已从Vue3中移除，但可以在第三方工具的帮助下完成。Vue官方推荐mitt或者微型发射器；
大多数情况下，不建议使用全局事件总线来实现组件通信。虽然简单粗暴，但是维护事件总线是很长一段时间的大问题，这里就不解释了。您可以阅读特定工具的文档。
状态管理工具
Vuex和Pinia是Vue3中的状态管理工具，使用这两个工具可以轻松实现组件通信。由于这两个工具功能强大，这里就不赘述了，具体可以参考文档。
以上是Vue3组件的七种通信模式的详细说明。更多关于Vue3组件通信方式的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。