今天小编给大家分享一下Vue2.0组件间如何传值的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。组件化开发是VUE中重要的开发
今天小编给大家分享一下Vue2.0组件间如何传值的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。
组件化开发是VUE中重要的开发方式,当各组件分离开发时,就必然会存在组件之间传值的问题。
props
传值是父子组件之间传值最常见的方式,在引用子组件的时候,加入想要传输给子组件的数据并通过props进行数据获取实现传值。
Parent.vue<child :child-data = "childData"></child>Child.vueexport default { // 数组写法 props: ["child-data"]; // 对象写法 props: { child-data: { type: String, require: true, // 是否必须 default: "默认值", // 设置默认值 validator(val) { return true; }, // 设置值的 验证 ,验证该值是否符合(true) } }}
当我们使用了props
完成了父组件将数据传给子组件,这种情况下,子组件从父组件中获取到的数据并不能够对数据进行更改,必须要使用$emit
才能对传输的值进行修改。
props
与$emit
联合使用,才能实现父子组件之间的传值,也就是通过子组件$emit
处理父组件的事件来实现子组件对父组件中的数据进行修改并传值给父组件。
Parent.vue<child :child-data = "childData" @change-child="changeChild"></child>methods: { changeChild(val) { console.log(val); // 子组件传递过来的更改了的新值 this.childData = val; }}Child.vuemethods: { handleChildData() { this.$emit("change-child", new-child-data); }}
不仅是props
,还可以通过model语法糖
实现父子组件之间的传值,而且这样的传值方式特别的繁琐,会造成很多不便。
model
可以将value
替代具体的值与$emit
完成父子组件之间的传值,写法略有不同。
Parent.vue<child v-model = "childData"></child>Child.vueexport default { props: ["value"], // value methods: { handleChildData() { this.$emit("input", new-child-data); } }}
也可以通过定义model
(不需要使用props
获取数据)来进行传值。
Parent.vue<child v-model = "childData"></child>Child.vueexport default { model: { prop: "child-data", // 重新取名 event: "change-child-data", }, methods: { handleChildData() { this.$emit("change-child-data", new-child-data); } }}
然而v-model
只能处理一个prop
,如果我们要处理多个prop
的话,就不能够使用了。
Parent.vue<child :child-data.sync = "childData"></child>Child.vueexport default { props: ["child-data"], methods: { handleChildData() { this.$emit("update:child-data", new-child-data); } }}
不过,在vue3中,
sync
将不需要再使用,v-model
将会支持多个prop
传值。
除了使用prop
传值,还可以通过ref
指向组件获取子组件中的属性或者方法。
通过ref
指向组件,可以通过调用组件中的属性或者方法进行获取。
Parent.vue<child ref="child"></child>export default { mounted() { const child = this.$refs.child; console.log(child.childData); child.handleChild("handle-child-data"); }}Child.vueexport default { data() { return { childData: "child-data", } }, methods: { handleChild(val) { console.log(val); } }}
不仅仅是可以通过ref
来实现子组件数据获取,还可以通过 children&parent 来传递父子组件中的数据。
$children
& $parent
$children
可以获取到一个父组件的所有子组件的数组,可以通过其获取到想要操作的子组件中的属性或者方法。
$parent
可以获取到父组件(对象),对其进行调用。
Parent.vuethis.$children[0].handleChild("change-child[0]-data");Child.vuethis.$parent.handleParent("change-parent-data");
但是前几种方法(prop & ref)只能实现父子组件之间的传值,并不能完成父组件与具有多层嵌套关系组件之间的传值,如果真要实现的话,将会很麻烦,会造成代码冗余、可复用性极低。
我们可以通过别的方法(attrs&listeners 、 provide&inject 、 eventBus)来实现多层嵌套组件与父组件之间的传值。
$attrs
& $listeners
$attrs
包含了父组件中传入孙子组件的数据(除了prop
已传递的属性、class
、style
)。通过v-bind="$attrs
可以传入孙子组件中。
$listeners
包含了父组件中的所有v-on
事件(除了包含.native
修饰器的)。通过v-on="$listeners
将父组件中的方法传给孙子组件。
<sun-child v-bind="$attrs" v-on="$listeners"></sun-child>
provide
可以给后代组件提供需要的数据或者方法(不管是嵌套多少层的组件)。
inject
可以获取任何父组件中提供的数据或者方法,直接使用。
Parent.vueprovide() { return { parent-data: "parent-data", handleParent: this.handleParent, }},methods: { handleParent() {},}Sun-Child.vueinject: ["parent-data", handleParent"],
但是provide & inject
是不可控的,因为这个里面传递的数据并不是响应式的(其中一个数据改变,并不会影响另外的),当某个嵌套组件使用某个传输的值的时候并不能追溯到是哪个父组件,所以,这种方式并不是特别可取。
eventBus
,顾名思义,中央事件总线,可以通过其实现各个层套的组件之间的传值,包括兄弟组件。
我们可以通过将其抽离出来成一个单独的js文件(Bus.js),挂载到全局(Vue.prototype.$bus)或者按需引入,又或者是存入到根对象的data上。
// 以按需引入的情况为例import Bus from 'Bus.js'Bus.$emit("handleBus", "自定义事件"); // 向外部传递数据Bus.$on("handleBus", data => {}); // 触发事件,获取数据Bus.$off("handleBus"); // 取消对自定义事件的监听
但是这些方法也只是适用于小范围内的数据使用较少的组件中,需要传递的数据过多的话,维护会很麻烦,且可复用性也极低。当数据传递量大的时候,建议使用vuex状态管理器
(常用)。
Tips
其实也可以通过插槽进行父子组件的值传递,不过插槽的作用不止如此,但是如果有遇到使用插槽更方便的情况的时候可以使用插槽
slot
。
以上就是“vue2.0组件间如何传值”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注编程网精选频道。
--结束END--
本文标题: vue2.0组件间如何传值
本文链接: https://www.lsjlt.com/news/342777.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
2024-05-24
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0