Vue-子组件向父组件传值

父组件向子组件传值，可点击查看

子组件向父组件传值依赖$emit, 触发事件,附加的参数也会传给监听器回调。

一、子组件

1.触发点击时,将值传给父组件
2.关键字this.$emit
3.valToFather是子组件和父组件的公共绑定事件,名称必须一致

<template>
  <div>
    <div v-for="(item,index) in list" :key="index">
      <input type="button" @click="onclick(item)" :value="item"/>
    </div>
  </div>
</template>
<script>
export default {
  name: "son-template",
  data() {
    return {
      list: [1, 2, 3]
    };
  },
  methods: {
    onclick(val) {
      this.$emit('valToFather',val,'aaaaaa');
      //触发valToFather事件,val参数回传。
    }
  }
};
</script>

二、父组件

1.import引入组件, components导入组件,调用组件
2.getSonVal绑定子组件中$emit的方法valToFather
3.在getSonVal中可以打印出子组件点击事件后,传入到父组件的值

<template>
    <div>
        <sonTemplate @valToFather="getSonVal"></sonTemplate> 
        //触发valToFather事件,val参数回传。
    </div>
</template>
<script >
import sonTemplate  from './son';
export default {
    components:{
        sonTemplate,
    },
    methods:{
        getSonVal(val,aaa){
            debugger;
        }
    }
}
</script>