码迷,mamicode.com
首页 > 其他好文 > 详细

vue中子父组件传值问题

时间:2020-02-03 18:54:30      阅读:58      评论:0      收藏:0      [点我收藏+]

标签:传递   select   min   data-   方法   class   调用   gets   put   

1.子组件向父组件传值(事件调用机制:本质就是父向子传递方法,子调用方法,子将数据当作参数传给这个方法:即传值给父组件):

1.在父组件中创建一个方法:

<p>购买数量:<number-box :id="id" @getcount="getSelectCount" :max="msglist.stock_quantity"></number-box></p>
(1)getSelectCount(){ 父组件中的方法
}
(2)@getcount="getSelectCount":将父组件中的方法传给子组件

2.在子组件中调用;

<input id="test" class="mui-input-numbox" type="number" value="1" @change="countChanged" ref="numbox"/>

countChanged() {
      this.$emit("getcount", parseInt(this.$refs.numbox.value));
    }
在子组件中通过.$emit()调用父组件传过来的方法,将子组件中的数据(this.$refs.numbox.value)当作.$emit()的一个参数传递给父组件。
 
 
2.父组件向子组件传值(事件绑定机制:本质就是在父组件中通过属性绑定将值传递给子组件,子组件通过props【】接收,然后子组件通过属性绑定使用数据):
1. 父组件属性绑定
    <p>购买数量:<number-box :id="id" @getcount="getSelectCount" :max="msglist.stock_quantity"></number-box></p>
2. 子组件接收
     props: ["max"],
3. 子组件属性绑定从父组件接收到的数据
     <div class="mui-numbox" data-numbox-min=‘1‘ :max="max">
 
 
 

vue中子父组件传值问题

标签:传递   select   min   data-   方法   class   调用   gets   put   

原文地址:https://www.cnblogs.com/zfj6666/p/12256531.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!