vue父子组件之间传值

父组件向子组件传值

1.父组件传递

在父组件页面中引用子组件的标签上使用v-bind（简写为:）绑定需要传递的值

<comment-box :id="id"></comment-box>

2.子组件接收

在子组件的vue实例中使用props接收父组件传递过来的值

export default {
    data(){},
    props: ['id']
}

子组件向父组件传值

1.父组件绑定事件

• 父组件定义一个处理从子组件传过来的值的函数

export default {
    methods: {
        getSelectedCount(value){
            //函数内部处理从子组件传过来的值
        }
    }
}

• 在父组件页面中引用子组件的标签上绑定这个处理函数

<numberbox @getcount="getSelectedCount"></numberbox>

2.子组件处理事件

• 子组件是一个输入框，为其绑定change事件，监听value值的改变，并为其添加ref属性，方便取到该输入框的value值

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

• 定义该change事件的处理函数，使用this.$emit触发父组件为子组件绑定的函数，并把父组件需要的值传过去

export default {
    methods: {
        countChanged(){ 
            this.$emit('getcount',parseInt(this.$refs.number.value))
         }
    }
}