vue子给父组件传值

1，子组件给父组件传值需要经过一个事件触发，用this.$emit进行传值，两个参数，第一个是在父组件接受这个方法的方法名称，另一个 就是给父组件的值

<template>
    <div>
        我是son组件,我要给父亲：{{list}}
        <p><button @click="toFather">点击给父亲</button></p>
    </div>
</template>

<script>
export default {
    data () {
        return {
            list:"钱"
        }
    },
    methods: {
        toFather(){
            //giveValue: 是父组件指定的传数据绑定的函数，this.list:子组件给父组件传递的数据
            this.$emit("giveValue",this.list)
        }
    }
}

</script>

 

2，父组件需要用一个方法去接收子组件传来的回调方法，然后将参数付给自己的data里的属性

在子组件标签里格式 @子组件方法=“父组件方法”

<template>
    <div>
       <h1>我是父组件,要问儿子拿个数字：<span style="color:orange">{{num}}</span></h1>
       <Son @giveValue="getValue"></Son>
    </div>
</template>

<script>
import Son from './son'
export default {
    data () {
        return {
            num:''
        }
    },
    components: {
        Son
    },
    methods: {
        getValue(newValue){
            this.num = newValue
        }
    }
}
</script>