Vue传值取值大总结

Vue传值大总结

前言

一直想成为一个全栈人员,学习前端也是必备技能之一,Vue作为现在比较流行的框架,我也想学习一下,今天把Vue那些转的头晕的传值方法总结一下,以备以后查看

使用props传值

props可以用于父组件传值到子组件

//父组件
<child-label title='aaaa'></child-label>
// 子组件
export default {
	props:[title,]
  }

此时这个title从父组件传到了子组件

使用$emit

// 子组件
methods:{
       sendMsg(){
           this.$emit('childData', 'child to parent')
       }
   }
// 使用父组件
<hello-vue @childData="getMsg"></hello-vue>

methods:{
    getMsg(val){
      this.childMsg = val
    }
}

使用公共js进行传值

// 公共js
import Vue from 'vue'
export default new Vue


// 父组件
import bus from bus //引入公共的js
methods:{
	sendMsg(){
		bus.$emit('aaa', 'bbb')
	}
}

// 子组件
import bus from bus
bus.$on('aaa')

通过 c h i l d r e n 和 children和 childrenparent

一个人可以有多个孩子,但是一个孩子只能有一个父亲$children是一个列表存储的数据通过索引获取即可

通过$attrs获取

如果和props一样传值,但是props已经使用的值,$attrs无法获取

$listensers

通过$listensers监控$emit数据的改变

this.$emit('childData', 'child to parent')
console.log('listensers', this.$listeners.childData)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值