vue2父向子传值props ，子向父用自定义事件$emit

 示例代码

 父组件代码

<template><div class="hello"><h1>{
   { msg }}</h1><son :message="message" :userInfo="userInfo" @handleChangeNum="getChangeNum"></son><h3>父组件显示 {
   {count }} </h3></div>
</template><script>
import son from '@/components/son.vue';
export default {name: 'HelloWorld',components:{son:son},props: {msg: String},data(){return {message:"hello vue.js",userInfo:{name:'wsc',age:18},count:0}},methods:{getChangeNum(val){this.count=val;console.log('子传过来的值是：'+val);}}
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
h3 {margin: 40px 0 0;
}
ul {list-style-type: none;padding: 0;
}
li {display: inline-block;margin: 0 10px;
}
a {color: #42b983;
}
</style>

子组件代码

<template><div><h3>{
   { message }}</h3><ul><li v-for="(item, index) in userInfo" :key="index">{
   { item }}</li></ul><input type="button" value="点击" @click="handleChangeNum" />{
   { count }}</div>
</template><script>
export default {name: "son",props: {message: String,userInfo: Object,},data() {return {count: 0,};},methods: {handleChangeNum() {this.count++;this.$emit("handleChangeNum", this.count);},},
};
</script><style>
</style>