vue父子组件互相传值;各组件间传值

1. 父组件向子组件传值,父组件中定义值,子组件中props来接收

     例:父组件中

       <div>这是父组件   <child :received='fromParent'/>     <div>

             子组件中
       <div>这是子组件   <p>{{ received }}</p>    <div>

      <script>

          export  default{  props:{  received : {type: String,default: ''}   }  }

      </script>

2.子组件向父组件传值,通过事件传递传递数据给父组件

          例:子组件中
       <div>这是子组件   <input v-model='name' @change='getName'/>

          js中: method:{ getName(){  this.$emit('doSometing', this.name)}  }

            父组件中

           <div>这是父组件   <child @doSomething='receiveName'/> {{paramsFromChild}} </div>

            js中:  method:{  receiveName(data){  this.paramsFromChild = data  } } //此处的data,就是上面子组件js中的this.name

3. 子组件向子组件传值

   没有直接子对子传参的方法,可将需要传值的子组件合并为一个组件;

   也可子组件传到父组件,再从父组件传给另一个子组件;

   也可通过定义一个公共的实例文件bus.js,作为中间仓库来传值,详 见 https://blog.csdn.net/lander_xiong/article/details/79018737

   使用vuex状态管理,可实现任何组件间的参数传递;

   

   

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值