vue组件的参数传递

vue组件之间的传值可分为两种情况，一种是父子传值，另外一种是非父子传值

父子传值

父子传值可以分为以下两点：

父传子（主要用props）

1、props方法（主要常用的）

父组件向子组件传参，通过自定义属性的方式进行传值，在子组件中使用props定义自定义的属性，然后在父组件中通过v-bind指令把需要传递的数据绑定在子组件上，那在子组件中props里面的自定义属性可以直接使用。

 // 写于父组件上
<Son :name="name"> </Son>
 
 // 写于子组件
export default {
  props:{
    name:{
        type:String,
        default:"原创：wimpyKid0975",
        required:false,
    }
  }
}

2、$refs方法（次要）

// 写于父组件上
<childRen ref="childRen"> </childRen>
<button @click="toValue">点击</button>
methods:{
    toValue(){
        this.msg = "这是父组件的值";
        this.$refs.childRen.wimpyKid(this.msg);
    }
}
// 写于子组件上
<div class="childRen">
    {{msg}}
</div>
methods:{
    wimpyKid(val){
        this.msg = val;
    }
}

子传父（主要用$emit）

1、$emit方法（主要常用的）

子组件向父组件传数据使用自定义事件， vue 组件提供了一个 emit(‘自定义事件名’， 传递的数据) )，子组件传递数据时，触发响应的事件函数，就会自动触发通过 $emit 给父组件绑定的自定义事件，自定义事件接受一个参数，参数就是子组件传递过来的数据。

// 写于父组件
<Son @wimpyKid="wimpyKidFn"> </Son>
export default{
  methods:{
    wimpyKidFn(value) {

    }
  }
}
// 写于子组件
this.$emit('wimpyKid', this.value)

2、$refs方法（次要）

// 写于父组件
<child ref="child"> </child>
methods:{
    toValue(val){
        this.msg = val
        
    }
}
// 写于子组件
<div class="child">
    <button @click="wimyKid">点击</button>
</div>
methods:{
    wimyKid(val){
        this.$parent.toValue(this.msg);
    }
}

非父子传值

兄弟传参

兄弟组件之间的数据传递，通过 eventBus 来做中间的桥梁，传输方通过中间组件调用 $emit 传数据，接收方通过 $on 接受数据，两者之间的自定义属性名保持一致。

注：记得使用npm或者yarn下载eventBus，插件eventBus并不是vue自带的，请知悉！

// 传输方组件调用方式
import Bus from '自定义路径/EventBus.js'
Bus.$emit('set-value', this.setValue);
 
// 接收方接受参数
import Bus from '自定义路径/EventBus.js'
 
created() {
    Bus.$on('set-value', val => {
        this.wimpyKid = val;
    })
}

爷孙传参

爷孙传参和父子传参一个道理，也有几分相似的地方，可以拿以下代码和父子传值的代码互相比较，即可知道相似之处。（与原理无关，只是个人为了方便记~）

爷传孙（$attrs）

包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。

此处摘自vue官方文档，点击跳转至官方文档

// 写于爷组件
<div id="app">
    <Son :msg="msg"> </Son>
</div>



// 写于父组件（主要代码，不可省略）
<div class="son">
    <Grandson v-bind="$attrs"> </Grandson>
</div>



// 写于孙组件
<div class="grandson">
    {{ msg }}
</div>
// 利用 props 接收数据
props:{ msg:String,}

孙传爷（$listeners）

包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。

此处摘自vue官方文档，点击跳转至官方文档

// 写于爷组件
<div id="app">
    <Son @setVal="setVal"> </Son>
</div>
methods:{
    setVal(val) {
        this.msg = val;
    }
}



// 写于父组件
<div class="son">
    <Grandson v-on="$listeners"> </Grandson>
</div>



// 写于孙组件
<div class="grandson">
    <button @click="toVal">点我</button>
</div>
methods:{
    toVal() {
        this.$emit("setVal",this.msg)
    }
}

vuex

另外，无关是否为父子传值的方法，Vuex存储数据

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

此处摘自vuex官方文档，点击跳转至官方文档

提示

另外，还有父子传参的话，还可用 $children 和 $parent，这里就不做太多解析,若想了解，后续文章会给出，主要是此方法不推荐用，存在着太大的变故哈~