本文介绍了Vue亲子成分和非亲子组件传输值问题，分享给大家，具体如下：

1。如何创建组件

1。创建一个新的组件，如：ODS文件夹下创建一个新的odslist.vue




odslist组件









出口默认{
数据（）{
返回{ }
}，
创建（）{

}，
方法：{

}，
组成：{

}
}





2。引进进口odslist from'ods / odslist vue'into main.js。



三.创建路由对象main.js创建路由规则


const路由器=新VerRouter（{
路线{
{路径： / / odslist ODS，成分：odslist }
}
}）


4。在主成分app.vue集货物的清单



系统会自动帮我们把这个标签到标签的href =# / / odslist ODSrel=nofollow外部

2。如何嵌入在父组件的子组件

1。新的子subcomponent.vue



2。进口的子从'。 /子/子。vue'is引入到父组件



三.组件在父组件中的注册


出口默认{
组成：{
如果属性名称和值相同，则可以缩短
子
}
}


4。在父组件的指定位置写入自定义标签。

三.如何实现父子组件之间的传输

1。父组件传递值的子

1。在子组件的道具：{ 'commentid} /子组件用于接收转移属性名称值的父组件



2。在用户定义的子组件标记父组件集父组件转移值到子组件

2。子值传给父组件

1。在父组件的自定义标签中设置自定义函数



2。在父组件的方法中声明一个函数


GetSubComponentParams（params）{
/ /子组件参数接收参数
this.myparams =参数；
}


三.在子组件传递参数



*参数1：要触发的事件名
*参数2：转移的值
* /
这个发射（'paramschange '，这美元。参数）


如何实现非亲子组件的传递值

非父组件的两个组件没有链接，不能通过此传输，因此我们只能实现通过第三方变量传递值的效果。第三个变量是：



使用一个空的Vue公司的实例为中心事件总线



价值转移步骤：



1。创建一个共同的js组件出口空Vue实例内的组件，如一个新的commonvue.js文件


进口Vue from'vue

出口默认新的Vue的写作方法（） / / ES6

*相当于以下
*
* const总线=新的Vue（）
* module.exports =总线
* /




2。组件A中的传输参数


公共汽车。$发出（'odscount '，这个mycount）



三.在组件B中接收参数


公共汽车。美元（'odscount（odscount）= > {
const oldval = $（# badgeid ）文本（）。

const lastval = parseInt（oldval）+ odscount
console.log（lastval）
$（# badgeid ）的文本（lastval）。
}）




以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。