vue 组件传值

vue 子组件向父组件传值

子组件向父组件传递input中的val值

子组件绑定一个事件，通过 this.$emit() 来触发

<!--子组件-->
 <!-- 父组件向子组件传递方法，使用事件绑定机制 v-on / @，当我们自定义了一个事件属性之后，子组件就能通过某些方式，来调用传递进去的方法了 -->
 <input type="number" value="1" ref="numbox" @change="countChanged" />

//子组件js
     methods:{
	     countChanged(){
	        this.$emit('getCount',parseInt(this.$refs.numbox.value));
	        // 通过子组件调用父组件的方法，传值的方式，完成子组件向父组件传递
	    },
     }

<!--父组件html-->
<number-box @getCount="getSelectC"></number-box>

//父组件js
   data(){
        return{
			getSelectCount:1,
        }
    },
     methods:{
     	getSelectC(count) {
				this.selectCount = count;
			},
     }

vue 父组件向子组件传值

获取库存数还有多少

<!--父组件html-->
<!-- 父组件中，可以在引用子组件的时候，通过属性绑定v-bind/:的形式，把需要传递给子元素的数据，以属性绑定的形式，传递到组件内部，供子组件使用 -->
<number-box :maxNumber="ProductDetails.stock"></number-box>

子组件使用props属性接收父组件传递过来的值

<!--子组件-->

<div class="mui-numbox" data-numbox-min="1" :data-numbox-max='maxNumber'>

//子组件js
// 组件中的props中的数据，都是父组件传递给子组件的   可读不可写
  props:['maxNumber'],

因为父亲组件中传递的值，是.then是一个异步操作的原因，所以导致numberbox组件已经被渲染了。但是值还没有拿到。
所以可以使用watch属性监听，来监听父组件传递过来的maxNumber的值

//子组件js
   watch:{
      'maxNumber':function(newVal,oldVal){
           console.log(newVal)
           //newVal就是父组件传递过来的值
      }
    },