vue组件传递函数,vue组件间的参数传递
本文主要介绍Vue构件化常用方法中构件值传递和通信的相关信息。通过示例代码进行了非常详细的介绍，对大家的学习或工作有一定的参考价值。下面让我们跟随边肖一起学习。
相关知识点
父组件将值传递给子组件。
子组件将值传递给父组件。
在同级组件之间传递值
将价值观代代相传。
在任意两个组件之间传递值。
父组件传值到子组件
父组件传递值给子组件有三种基本方法，即：
属性道具
参考$refs
儿童$儿童
日常开发中，我们使用道具和$refs的频率比较高，$children相对较少(我用的不多~)。
属性 props
在父组件中添加属性，并在子组件中接收和使用它们，例如：
父组件：
HelloWorld msg=欢迎使用您的Vue.js应用/
子组件：
h1{{ msg }}/h1
道具：{
消息：字符串
}
引用 $refs
在父组件中，可以使用这个。$refs.xxx获取子组件中定义的数据或方法并使用它。
父组件：
HelloWorld ref=hw /
已安装(){
这个。$ refs . HW . foo= bar ；
}
子组件：
p{{ foo }}/p
data() {
返回{
福：“福”
};
}
注意事项：
这个。$refs.xxx不能在创建的生命周期中使用，因为真正的DOM还没有挂载。如果有必要，可以使用vm。$nextTick访问DOM。或者可以理解为父组件先于子组件创建，在父组件已创建的生命周期内还没有创建子组件，所以不能获取子组件。
在Vue中，组件生命周期的调用顺序如下：
构建的调用顺序是先父后子，渲染的顺序是先子后父。
组件的销毁操作是先父后子，销毁的顺序是先子后父。
加载渲染过程
创建前的父级
父项已创建
装载前的父级
创建前的子代
孩子已创建
挂载前的子级
安装好的
父安装的
子组件更新流程
更新前的父级
更新前的子进程
孩子已更新
父级已更新
父组件更新流程
更新前的父级
父级已更新
破坏过程
销毁前的父级
销毁前的子进程
孩子被毁了
父母被毁了
已创建(){
Console.log(“第一次执行”)；
console.log(这个。$ refs . HW)；//未定义
这个。$nextTick(()={
Console.log(第三次执行)；
console.log(这个。$ refs . HW)；//这个时候就可以拿到了
});
}
已安装(){
Console.log(“第二次执行”)；
这个。$ refs . HW . foo= bar ；
}
子元素 $children
父组件：
这个。$children[0]。xx= xxx
注意事项：
$children获取当前实例的直接子组件。如果父组件中有多个子组件，需要注意的是$children不保证顺序，也不响应。
子组件传值到父组件
子组件用来向父组件传递值的方法是自定义事件。在子组件中调度，在父组件中侦听。
注意：无论是谁调度事件，都是事件的侦听器，但在声明它时，它是在父组件中声明的。
有三种情况：不传递参数，传递一个参数，传递多个参数。
不要传递参数
子组件：
这个。$ emit( child foo )；
父组件：
hello world 2 @ child foo= on child foo /hello world 2
方法：{
onChildFoo() {
console . log(======onChildFoo=======)；
}
}
传递一个参数。
使用$event接收父组件中的参数。
子组件：
这个。$emit(childFooSingle ， foo )；
父组件：
hello world 2 @ child foo single= onchildfoosone($ event)/hello world 2
方法：{
onchidfoosingle(e){
console . log(e)；//foo
}
}
传递多个参数
使用父组件中的参数来接收参数，这些参数将作为数组传递。
子组件：
这个。$emit(childFooMultiple ， foo ， bar ， dong )；
父组件：
hello world 2 @ child foo single= onchildfoo multiple(arguments)/hello world 2
方法：{
onchidfoomultiple(msg){
console . log(msg[0])；//foo
console . log(msg[1])；//酒吧
console . log(msg[2])；//董
}
}
兄弟组件之间传值
兄弟之间传递的值可以通过公共父组件桥传递，比如$parent和$root。
兄弟组件1:
这个。$parent。$on(foo ，handle)；
兄弟组件2:
这个。$parent。$ emit( foo )；
祖代和后代之间传值
因为组件的嵌套层数太多，用道具来传输不切实际。vue提供了提供/注入API来完成这个任务。
提供/注入可以实现价值观从祖先到后代的传递。
世代：
提供(){
返回{foo: foo}
}
后代：
注入：[foo]
注意：provide和inject主要为高层组件/组件库提供用例，不建议直接在应用代码中使用。我们将在开源组件库中看到更多。但是，反过来，如果你想让后代把价值观传给祖先，这种方案是行不通的！
官方提示：提供和注入绑定没有响应。这是故意的。但是，如果传入一个可监视的对象，其对象的属性仍会响应。
世代：
提供(){
返回{
董：这个.家
};
},
data() {
返回{
主页：[应用主页]
};
}
后代：
注入：[dong]
this . dong=[ App data ]；//将报告错误，避免直接改变注入的值，因为当提供的组件重新呈现时，更改将被覆盖。
this . dong . push( App data )；//可以修改成功。
任意两个组件之间传值
在任意两个组件之间传递值有两种方案：事件总线和Vuex。
事件总线
创建一个负责事件分派、监控和回调管理的总线类。
首先，创建一个bus.js，在main.js中引入它，然后在组件中使用它：
步骤1:创建一个新的plugins/bus.js
类别总线{
构造函数(){
this.callbacks={}
}
$on(name，fn){
this . callbacks[name]=this . callbacks[name] []
this.callbacks[name]。推动(fn)
}
$emit(name，args){
if(this.callbacks[name]){
this.callbacks[name]。forEach(cb=cb(args))
}
}
}
导出默认总线；
第二步：在main.js中介绍
从导入总线。/plugins/bus ；
Vue.prototype.$bus=新总线()
步骤3:在组件中使用
1:组件：
这个。$巴士。$on(foo ，handle)
2:组件：
这个。$巴士。$emit(foo )
Vuex
创建唯一的全局数据管理器存储，通过它可以管理数据和通知组件状态更改。可以自己了解一下官方文档Vuex，详细使用后会写专题~
总结
关于Vue组件化常用方法的组件值传递和交流的文章到此为止。更多相关Vue组件价值传递和交流内容，请搜索我们之前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。