组件间通信（父子间传值）----第一节（vue2）

先说一下vue2父传子吧，比如下面代码，

在子组件标签里面将msg变量赋值给子组件的msgg这个属性

<template>
  <div>
    <SonComp :msgg='msg'/>
  </div>
</template>

<script>
import SonComp from './Hightpom.vue'
export default {
  components:{SonComp},
  data() {
    let msg='这是传递给子组件的值'
    return {
      msg
    }
  },
    
  }
</script>

在子组件定义属性，因为传过来的是字符串，所以在props接收的msgg这个属性故为String

<template>
  <div>
      <h1>这是子组件,父组件传递过来的值是：{
  {msgg}}</h1>
  </div>
</template>

<script>
export default {
    props:{
        msgg:String
    },}
</script>

 页面呈现的效果为：

然后就是子组件向父组件传递值

首先在子组件里面通过事件将值emit一个事件抛出值，第二个参数就是想要传递给父组件的值，通过子组件标签将emit的那个事件定义一个函数，函数的第一个参数就是抛出来的那个值

<template>
  <div>