vue子给父组件传值

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

 1 <template>
 2     <div>
 3         我是son组件,我要给父亲：{{list}}
 4         <p><button @click="toFather">点击给父亲</button></p>
 5     </div>
 6 </template>
 7 
 8 <script>
 9 export default {
10     data () {
11         return {
12             list:"钱"
13         }
14     },
15     methods: {
16         toFather(){
17             //giveValue: 是父组件指定的传数据绑定的函数，this.list:子组件给父组件传递的数据
18             this.$emit("giveValue",this.list)
19         }
20     }
21 }
22 
23 </script>

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

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

 1 <template>
 2     <div>
 3        <h1>我是父组件,要问儿子拿个数字：<span style="color:orange">{{num}}</span></h1>
 4        <Son @giveValue="getValue"></Son>
 5     </div>
 6 </template>
 7 
 8 <script>
 9 import Son from './son'
10 export default {
11     data () {
12         return {
13             num:''
14         }
15     },
16     components: {
17         Son
18     },
19     methods: {
20         getValue(newValue){
21             this.num = newValue
22         }
23     }
24 }
25 </script>