从0开始探究vue-组件化-组件之间传值
2020/3/2 11:16:08
本文主要是介绍从0开始探究vue-组件化-组件之间传值,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
理解
Vue中有个非常重要的核心思想,就是组件化,组件化是为了代码复用
什么是组件化
组件化,就像一个电脑主机里的主板,有内存条的插口,有硬盘,光驱等等的插口,我们的项目,就像一个电脑主机,通过各种组件化的模块(硬盘、内存等),来拼合成一个完整的电脑。
如图,每一个块都是一个组件,由许许多多的组件拼合而成,可以无限的嵌套下去组件化的好处
- 模块复用,提高效率,让重复的代码只写一遍。
- 预留个性化设置,可以保证模块,既通用,又可变。
- 提高可维护性,如果一个项目多个页面使用了同一个组件(例如消息弹框),如果修改弹框样式,只需要修改这个模块即可。
写法
cli模式
组件部分
<template> <div></div> </template> <script> export default { name:"myAlert" }; <style></style> 复制代码
使用者部分
<template> <div> <myAlert></myAlert> <!-- 实例中使用组件 --> </div> </template> <script> import myAlert from '@/components/alert.vue';//导入自己写的组件 export default { components:{myAlert}//在这个vue实例中注册组件 }; </script> <style></style> 复制代码
引入vue.js模式
// 定义名为 todo-item 的新组件 Vue.component('myAlert', { template: '<div>这是一个弹框</div>' }) var app = new Vue(...) 复制代码
html部分使用
<div> <myAlert></myAlert> </div> 复制代码
组件传值
Vue
中存在的组件之间传值的方案如下
父=>子
props
子组件中声明props
,父组件往对应的props值中传递
$refs
父组件使用this.$refs.组件名.变量
来选中子组件并修改子组件的内容
$children
父组件使用this.$children[0].变量
来选中并修改子组件的内容
需要注意的是:由官网vm.$children得知
$children 并不保证顺序,也不是响应式的
所以一般不建议使用此方法来进行传值,因为不能很稳定的找到指定组件的实例,除非这个页面只有一个子组件
另外,此例中,this.$children[0]
不是响应式的this.$children[0].变量
是响应式的。
子=>父
$emit
此处为观察者模式
- 子组件调用
this.$emit('confirm','点击了确定')
来派发confirm
事件 - 父组件中
<myAlert @confirm='successCallback'></myAlert>
来监听事件; 注意:此处为,谁派发就是谁监听,也就是说,confirm
事件的派发者和监听者,都是myAlert
组件,myAlert
组件监听完毕后将调用父组件的successCallback
回调事件,当然这个监听的事件名
和触发的事件名
都是可以自定义
的。
兄弟组件之间互相传值
使用公共节点搭桥
- 使用公共父级组件
$parents
或者$root
//组件一 this.$parents.$on('foo',(e)=>{ console.log(e);//此处e为$emit时传入的值 }) //组件二 this.$parents.$emit('foo','bar');//控制台输出bar 复制代码
- 使用任意两个组件之间传值的方案 点击查看
跨辈分传值
概念,所谓跨辈分传值,就是
祖辈->父辈->子辈->孙辈->... 其中,垮了一个辈分或多个辈分的就是跨辈分传值,例如,祖辈及孙辈
provide/inject
由于多级嵌套,使用props
传递显然是不现实的
针对这种情况,vue
提供了 provide/inject
两个API
来完成这件事
- 祖辈使用
provide
声明一个变量 - 孙辈使用
inject
来注入祖辈声明的变量
写法:
//祖辈 export default { provide(){//此处可以传入动态变量,与data类似 return { componentYeye:this } }, data(){ return { yeyedeBianliang:'爷爷的变量' } } } //孙辈 export default { inject:['componentYeye'],//此处为数组,注入祖辈声明的变量 mounted(){ console.log(this.componentYeye.yeyedeBianliang);//爷爷的变量 } } 复制代码
注意
- 此方法多用来制作组件库时使用。
- 此方法不建议直接在孙辈修改祖辈的数据。因为这些数据可能在多个子组件中使用,如果要修改,应该调用祖辈组件变量的方法来修改,与
vuex
中建议变量修改都是用commit
类似
使用任意两个组件之间传值的方案 点击查看
任意两个组件之间传值
原型挂载
所谓原型挂载,就是在main.js
中将公共变量,事件,都挂在到Vue原型上
//main.js Vue.prototype.$globalData = {} Vue.prototype.$sayName = function(e){ console.log('我的名字是',e) } new Vue({...}) //组件一 Vue.prototype.$globalData.name='小明'; this.$sayName('小王');//我的名字是小王 //组件二 console.log(this.$sayName.name);//小明 this.$sayName('小王');//我的名字是小王 复制代码
事件总线
所谓事件总线,就是在当前的Vue
实例之外,再创建一个Vue实例来专门进行变量传递,事件处理,管理回调事件等
//main.js中 Vue.prototype.$bus = new Vue(); new Vue({...}) //组件一 this.$bus.$on('sayName',(e)=>{ console.log('我的名字是',e) }) //组件二 this.$bus.$emit('sayName','小明');//我的名字是 小明 复制代码
vuex
Vuex
是Vue
提供的一种,专门用来管理vue
中的公共状态,事件等等。详见 从0开始探究vue-公共变量的管理
这篇关于从0开始探究vue-组件化-组件之间传值的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-04package.json 文件位置在哪?-icode9专业技术文章分享
- 2024-10-01Craco.js学习:从入门到实践指南
- 2024-10-01Create-React-App学习:入门与实践指南
- 2024-10-01CSS-in-JS学习:从入门到实践指南
- 2024-09-30JSX语法学习:从入门到初步掌握
- 2024-09-30Mock.js学习:入门教程与实战演练
- 2024-09-30React Hooks学习:从入门到实践
- 2024-09-30受控组件学习:React中的基础入门教程
- 2024-09-29JS定时器教程:初学者必看指南
- 2024-09-29JS对象教程:初学者的全面指南