Vue 父子组件之间的通信传参

1、props : 父组件 向 子组件 传参

Parent.vue

<template>
<div>
    parent：下面是我的子组件
    <childSon :userName='name'></childSon>	<!-- 从写法上看这相当于一个属性值绑定 -->
</div>
</template>
<script>
import childSon from './Childs'
export default {
    name:'Parent',
    components:{
        childSon
    },
    data(){
        return{ 
            name:'啊哈'
        }
    }
}
</script>

Childs.vue

<template>
<div>
    child:这是父组件给我传的数据——{{userName}}
</div>
</template>
<script>
export default {
    name:'Childs',
    props:['userName'],		//取从父组件拿传来的参数
    data(){
        return{

        }
    }
}
</script>

2、emit :子组件 向 父组件 传递数据

Parent.vue

<template>
<div>
    parent：这是我的子组件传给我的值：{{num}}
    <childSon :content='content' @getNum='getMsg'></childSon>
    <!-- 从写法上看这相当事件监听，监听子组件发送的数据-->	
</div>
</template>
<script>
import childSon from './Childs'
export default {
    name:'Parent',
    components:{
        childSon
    },
   data() {
    return {
      content:'er',
      num:''
    }
  },
  methods:  {
      getMsg(num){
          this.num = num;
      }
  }
}
</script>

Childs.vue

<template>
<div>
    child:这是父组件给我传的数据——{{content}} <br />
    <button @click="sendMsgtoParent">点击我可以向父子间传递参数哦</button>
</div>
</template>
<script>
export default {    
    name:'Childs',
    props:['content'],
    data(){
        return{
            num: 0
        }
    },
    methods: {
        sendMsgtoParent(){
            this.$emit('getNum',this.num ++ );	//给父组件发送事件getNum
        }
    }
}
</script>

运行结果如下图：

原作者文章链接：Vue父子组件通信的三两事（prop、emit）