父子组件间传值，父传子，子传父

父子组件给子组件传值

       第一步：爸爸将数据递给儿子，所以我们就需要在子组件绑定父组件的数据

       第二步：爸爸都已经将数据给你了，那么你就要礼貌性的伸手去拿，这时我们可以利用props去接爸爸传过来的值

       第三步：当你拿到值的时候，就可以随意发挥数据的作用啦

代码如下：

   

父组件：
<template>
  <div id="app">
     <chuanzhi :fatherdata='data'></chuanzhi>  //绑定父组件的数据
  </div>
</template>

<script>

import Chuanzhi from './components/chuanzhi'

export default {
  name: 'App',
  data() {
    return {
      data:'哈喽~我是父组件的数据'
    }
  },
  components:{
   Chuanzhi
  }
}
</script>

子组件：
<template>
    <div>
        <p> {{ fatherdata }} </p>  //展示父组件的数据
    </div>
</template>

<script>
export default {
    props:{          //使用props接受父组件的数据
        fatherdata:{
            type:String   //限制拿到父组件数据的数据形式，这里为字符串型的数据
        }
    }
}
</script>

子组件给父组件传值

        第一步：给子组件绑定一个事件，利用触发事件给父组件传值，这里利用this.$emit将事件和数据传递过去

        第二步：子组件绑定好事件之后，父组件需要时刻监听着子组件的变化（使用v-on监听），一旦发生改变，就可以进行相关操作，并以此获得数据

代码：

父组件：

<template>
  <div id="app">
     <chuanzhi  @senddata='getdata'></chuanzhi> //监听的事件
     <p> {{ sondata }}</p>
  </div>
</template>

<script>

import Chuanzhi from './components/chuanzhi'

export default {
  name: 'App',
  data() {
    return {
      sondata:''
    }
  },
  components:{
   Chuanzhi
  },
  methods: {
    getdata(value) {
      this.sondata = value  //事件一旦触发，便可将子组件的数据拿到手啦
    }
  }
}
</script>
 

子组件：

<template>
    <div>
        <button  @click='change'>发送子组件的数据</button> //绑定一个点击事件，一旦触发，父组                                     件便可以监听到，然后进行相关的操作
    </div>
</template>

<script>
export default {
    data() {
        return{
          message:'哈喽~我是子组件的数据'
        }
    },
    methods: {
        change() {
            this.$emit('senddata',this.message)  //使用this.$emit给父组件传递事件和参数，第一个事件，第二个是参数，第一个事件名就是父组件监听的事件名
        }
    }
}
</script>