vue组件传值大全

组件传值大全

props:父传子

父组件的子标签加 :name='name'
子组件添加props: ['name']，然后直接用name就行了，不用在data中添加name，而且props和data同级

$emit:子传父

子元素data中有name

//子触发
<button @click="faSong">发送</button>

触发faSong事件

  methods: {
    faSong () {
      this.$emit('zhongZhuan', this.name)
    }
  }

父组件的子标签<one @zhongZhuan='zhi'></one>

  methods: {
    zhi (name1) {
      this.name = name1
    }
  }

把子组件存在zhongZhuan的值存到name 中了
解释：
1.在子组件上绑定一个方法

<子组件标签 @子组件方法名=‘父组件方法名’>
<button @click='父组件方法名'>

2.在子组件中触发改方法

 this.$emit('父组件方法名','参数')
 this.$emit('click')

refs传值子传父

父组件的子标签添加ref=‘别名’

<one ref="one"></one>

使用$refs.别名就可以调用子组件所有方法

this.name = this.$refs.one.name

$parent子调父
不用做什么只要是父子组件关系，子组件直接用parent可以调用父所有方法属性

console.log(this.$parent.age)

$children

不了解。。。
原文：https://www.bbsmax.com/A/Gkz1BGnNJR/
他返回的是一个组件集合，如果你能清楚的知道子组件的顺序，你也可以使用下标来操作；

for(let i=0;i<this.$children.length;i++){
    console.log(this.$children[i].msg);//输出子组件的msg数据；
 }

• ***eventbus:兄弟组件之间的传值,两个组件必须同时显示在一个页面中

创建bus.js

import Vue from 'vue'
var bus = new Vue()
export default bus

一个组件：点击发送,触发toDidi方法,把name传给中转站
<button @click=‘toDidi’>发给弟弟

toDidi () {
  bus.$emit('toBrother', this.name)
}

另一个组件：钩子函数

beforeCreate () {
  bus.$on('toBrother', msg =>{
    this.get = msg
})
}

vuex

https://blog.csdn.net/qq_43217258/article/details/107147275

路由传值：

传：

this.$router.push('/SearhResult?key='+vuele)

接：

this.key = this.$route.query.key

有问题望指正