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,这里就不做太多解析,若想了解,后续文章会给出,主要是此方法不推荐用,存在着太大的变故哈~

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值