vue组件间参数传递的方法,vuex组件之间传值
本文主要介绍vue组件之间传递值的方式。对vue感兴趣的同学可以参考一下。
目录
概述1。父组件将该值传输给子组件2。子组件将该值传输给父组件1。子组件绑定一个事件，并由此触发。$emit () 2。回调函数3。组件实例由$parent/$children或$refs 3访问。该值在兄弟1之间传输。或者$emit和props 2的组合。
概述
我们都知道Vue是一个轻量级的前端框架，其核心是组件开发。Vue是由一个个组件组成的，组件化是它的本质，也是最强大的功能之一。然而，组件实例的范围是相互独立的，这意味着不同组件之间的数据不能相互引用。
但是在实际的项目开发过程中，我们需要访问其他组件的数据，所以就有了组件通信的问题。在vue中，组件之间的关系是：父亲、儿子、兄弟和代。根据不同的关系，如何实现数据传输是我们接下来要讲的。
一、父组件向子组件传值
即父组件通过属性的方式将值传递给子组件，子组件通过props接收。
在父组件的子组件标签中绑定自定义属性。
//父组件
用户详细信息：myName=name /
导出默认值{
组件：{
用户详细信息
}
.
}
使用props(可以是数组或对象)在子组件中接收它。您可以传递多个属性。
//子组件
导出默认值{
道具：[我的名字]
}
/*
Props: {myName: String} //这个指定传入的类型，如果类型不对会发出警告。
道具：{我的名字：[字符串，数字]}//多种可能的类型
prosp:{我的名字：{type: string，requires:true } }//必选string
道具：{
childMsg: {
类型：数组，
默认值：()=[]
}
} //default指定默认值。
如果道具验证失败，控制台会发出警告。
*/
子组件接收到的父组件的值分为两种类型：引用类型和公共类型：
常见类型：字符串、数字、布尔、空。
引用类型：数组、对象
基于vue的单向数据流，即组件之间的数据单向流动，不允许子组件直接修改父组件传递的值，所以要避免这种直接修改父组件传递的值的操作，否则控制台会报错。
如果传递的值是简单数据类型，则可以在子组件中修改它，并且它不会影响从父组件调用相同值的其他同级组件。
具体来说，您可以先将传递的值重新分配给数据中的一个变量，然后更改该变量。
//子组件
导出默认值{
道具：[我的名字]，
data() {
返回{
Name: this.myName //将传递的值赋给新变量
}
},
观察：{
我的名字(新值){
This.name=newVal //监视父组件传递的值，如果值发生变化，则更改子组件内部的值。
}
},
方法：{
changeName() {
This.name=Lily //你在这里修改的只是你自己的内部值，所以不会报错。
},
}
}
注意：如果不使用watch来监视父组件传递的myName值，那么子组件中的Name值不会随着父组件的myName值而改变，因为name: this.myName在数据中只定义了一个初始值。
如果引用了类型的值，当在子组件中修改该值时，父组件的也将被修改，因为其数据是公共的，并且也引用该值的其他子组件也将被修改。可以理解为父组件传递给子组件的值相当于复制了一个副本，这个副本的指针仍然指向父组件中的那个，也就是共享同一个引用。所以除非有特殊需求，否则不要轻易修改。
二、子组件向父组件传值
1.子组件绑定一个事件，通过 this.$emit() 来触发
在子组件中绑定一个事件，并为此事件定义一个函数。
//子组件
Button @click=changeParentName 更改父组件的名称/按钮
导出默认值{
方法：{
//子组件的事件
changeParentName: function() {
这个。$ emit (handleChange ， Jack )//触发父组件中的handleChange事件，并将其传递给Jack。
//注意：这里的事件名应该和父组件中绑定的事件名一致。
}
}
}
在父组件中定义并绑定handleChange事件
//父组件
child @ handle change= change name /child
方法：{
参数changeName(name) {//name是从子组件传入的值Jack。
this.name=name
}
}
2.通过 callback 函数
首先，在父组件中定义一个回调函数，并传递回调函数。
//父组件
child:callback= callback /child
方法：{
回调：函数(名称){
this.name=name
}
}
在子组件中接收并执行回调函数。
//子组件
Button @click=callback(Jack )更改父组件的名称/按钮
道具：{
回调：函数，
}
3. 通过 $parent / $children 或 $refs 访问组件实例
这两种方法都可以直接获取组件实例，使用后可以直接调用组件的方法或者访问数据。
//子组件
导出默认值{
data () {
返回{
标题：“子组件”
}
},
方法：{
说你好(){
console . log( Hello )；
}
}
}
//父组件
模板
child ref=childRef /
/模板
脚本
导出默认值{
已创建(){
//通过$ref访问子组件
console.log(这个。$ refs . child ref . title)；//子组件
这个。$ refs . child ref . say hello()；//你好
//通过$children调用子组件的方法
这个。$ children . say hello()；//你好
}
}
/脚本
注意：这种方式的组件通信不能跨级别。
三、兄弟组件之间传值
1. 还是通过 $emit 和 props 结合的方式
在父组件中，将要传递的变量绑定到希望传递值的两个兄弟组件，并定义事件。
//父组件
child-a :myName=name /
child-b:myName= name @ changeName= editName /
导出默认值{
data() {
返回{
姓名：“约翰”
}
},
组件：{
ChildA :ChildA，
child-b: ChildB，
},
方法：{
editName(name) {
this.name=name
},
}
}
接收子组件b中的变量和绑定触发事件。
//子b组件
p姓名：{{我的姓名}}/p
按钮@click=changeName 修改名称/按钮
脚本
导出默认值{
道具：[我的名字]，
方法：{
changeName() {
这个。$ emit (changename ， lily )//触发事件并传递值
}
}
}
/脚本
//子组件
P name: {{ newName }}/p
脚本
导出默认值{
道具：[我的名字]，
计算值：{
newName() {
If(this.myName) {//确定是否有值被传递。
返回this.myName
}
Return John //传递的值没有默认值。
}
}
}
/脚本
即当子组件B通过$emit()触发父组件的事件函数editName，改变父组件的变量名值时，父组件可以通过props将改变后的值传递给子组件A，从而实现兄弟组件之间的数据传递。
2.通过一个空 vue 实例
创建一个EventBus.js文件并公开一个vue实例。
从“Vue”导入Vue
导出默认新Vue()
将这个空的vue实例导入到要传递的文件中，绑定事件，通过$emit触发事件函数。
(也可以在main.js中全局引入这个js文件我一般在需要使用的组件中引入。)
模板
差异
P name: {{ name }}/p
按钮@click=changeName 修改名称/按钮
/div
/模板
脚本
从导入{ EventBus }./EventBus.js
导出默认值{
data() {
返回{
姓名：“约翰”，
}
},
方法：{
changeName() {
这个. name=Lily
事件。$ emit(编辑名称，this。name)//触发全局事件，将更改后的值传入事件函数。
}
}
}
/脚本
vue实例也被导入到接收传递值的组件中，回调由$on监控，回调函数在触发事件时接收所有传入的参数。
从导入{ EventBus }./EventBus.js
导出默认值{
data() {
返回{
名称：“”
}
},
已创建(){
EventBus。$on(编辑名称，(名称)={
this.name=name
})
}
}
这种创建空vue实例的方式相当于创建一个事件中心或中继站来发送和接收事件。这种方法也适用于任何组件之间的通信，包括父子、兄弟和跨级别。对于通信需求简单的项目比较方便，但是对于比较复杂的情况或者大型项目，可以使用Vue提供的比较复杂的状态管理模式vuex来处理。
四、多层父子组件通信
有时候，需要沟通的两个组件并不是直接的亲子组件，而是祖孙，或者是跨越更多层次的亲子组件。在这种情况下，无法将参数从子组件级转移到子组件级，尤其是在组件级较深、嵌套较多的情况下，需要转移的事件和属性较多，会导致代码混乱。
这时候就需要使用vue提供的高阶方法：provide/inject。
这一对选项需要一起使用，以允许一个祖先组件向它的所有后代注入一个依赖项，不管组件级别有多深，只要建立了上下游关系，它就会一直生效。
Provide/inject:简单来说就是通过provider在父组件中提供变量，然后通过inject注入到子组件中。无论组件级别有多深，该变量在父组件的整个生命周期中都将保持有效。
父组件：
导出默认值{
Provide: {//它的作用是将变量**name**提供给它的所有子组件。
姓名：“杰克”
}
}
子组件：
导出默认值{
注入：[name]，//注入父组件提供的名称变量
已安装(){
console . log(this . name)；//插孔
}
}
注意：提供和注入绑定没有响应。也就是说，父组件的名称改变后，子组件不会改变。
如果要实现提供和注入数据响应，有两种方法：
提供祖先组件的实例，然后将依赖注入到后代组件中，这样就可以在后代组件中直接修改祖先组件实例的属性。但是，这种方法有一个缺点，就是在这个实例上安装了很多不必要的东西，比如道具和方法。
//父组件
差异
按钮@click=changeName 修改名称/按钮
儿童-b /
/div
脚本
.
data() {
返回{
姓名：“杰克”
};
},
提供(){
返回{
ParentObj: this //提供祖先组件的实例。
};
},
方法：{
changeName() {
这个. name=Lily
}
}
/脚本
后代中的值：
模板
div class=border2
P name: {{parentObj.name}}/P
/div
/模板
脚本
导出默认值{
注入：{
parentObj: {
默认值：()=({})
}
}//或者注入：[parentObj]
};
/脚本
注意：这种方法广泛应用于功能组件。功能组件，即无状态(无响应数据)、未初始化(无此上下文)、无任何内部生命周期处理方法的组件，渲染性能较高，更适合依赖外部数据传输和变化的组件。
总结
亲子沟通：父母通过道具向孩子传输数据，孩子通过$ emit向父亲传输数据；通过$parent/$children进行交流；$ref也可以访问组件实例；提供/注入；$ attrs/$ listeners；
兄弟通信：EventBus；Vuex
跨级通信：EventBus；Vuex提供/注入；$ attrs/$ listeners；
以上是对vue组件之间相互传递值的方式的详细解释。更多关于vue的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。