vue父子传值,兄弟传值,子父传值详解
更新时间:2021年11月01日 14:48:03 作者:大林爱学习
这篇文章主要介绍了Vue传值-三种常用传值示例,主要介绍了父组件向子组件进行传值,子组件向父组件传值和非父子组件进行传值,感兴趣的小伙伴们可以参考一下
一、父组件向子组件传值
1.父组件.vue
// 父组件中 <template> <div> <Child ref="child" :title="value"/> </div> </template> <script> export default { data() { return { value: 'hello world!' } } } </script>
2.子组件.vue
// 父组件中 <template> <div> <span>{{title}}</span> </div> </template> <script> export default { props: { title: { type: String, default: '' } } } </script>
//title值为'hello world!
二、兄弟组件间传值还可以通过中间件Bus
$emit
传值
$on
接收
$off
删除传输事件
1.A组件.js
this.$bus.$emit("flag",true)
2.B组件.js
mounted() { this.$bus.$off('flag') this.$bus.$on('flag', data=> { this.flag= data }) }
三、子组件向父组件传值
1.父组件.js
<template> <div> <Child ref="child" @getTitle="getTitle"/> </div> </template> <script> import Child from './components/Child' export default { components: { Child }, data() { return { } }, method:{ getTitle(data){ console.log(data) } } } </script>
打印结果为 hello xuliting
2.子组件.js
<template> <div> <span>{{title}}</span> </div> </template> <script> export default { data() { return { title: 'hello xuliting' } }, mounted(){ this.getFun() }, method:{ getFun(){ this.$emit("getTiltle",this.title) } } } </script>
总结:
组件间也可以通过传递方法从而解决。例如父组件为A,子组件有B和C。
父组件A调用子组件B的方法定义为aFun,把aFun传递给子组件C即可
这是在父组件中的组件C进行方法传递
<C :a-fun="aFun" />
引用的则是在组件C,通过props
props: { aFun: { type: Function, default: () => function() {} } }
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容!
相关文章
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
这篇文章主要介绍了vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定的相关知识,本文通过实例代码相结合的形式给大家介绍的非常详细 ,需要的朋友可以参考下2018-09-09详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)
这篇文章主要介绍了详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2019-02-02elementPlus中的Autocomplete弹出层错位问题解决分析
这篇文章主要介绍了elementPlus中的Autocomplete弹出层错位问题解决分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-07-07
最新评论