Vue父组件和子组件之间数据传递和方法调用

父组件import引用子组件
使用子组件时在子组件上添加一个v-bind属性，并绑定上数据
在子组件中创建 props ，在props 中创建相同的属性名，用来接收数据
把接收到的数据在子组件中使用

子组件中需要发出该自定义事件，可以是按钮的点击事件，也可以是其他方式
将需要传的值放在 $emit 第二个参数的位置，这个参数会被传给父组件中的响应方法
需要在父组件中使用子组件并在子组件标签上绑定对事件的监听

//父组件
<template>
  <div id="header">  
    <headerchild ref="headerChild"></headerchild>
    <button @click="getChild()">父组件获取子组件的数据和方法</button>
  </div>
</template>
<script>
import HeaderChild from './HeaderChild'
export default {
  data () {
      return {
          title:'我是父组件的数据'
      }
  },
  methods: {
     getChild (){
         console.log(this.$refs.headerChild.name)
     },
     run (){
         console.log("我是父组件里面的方法")
     }
  },
  components: {
      'headerchild': HeaderChild
  }
}
</script>
<style lang="sass" scoped>

</style>

//子组件
<template>
  <div id="headerchild">
      <button @click="getParent()">获取父组件的数据和方法</button>
  </div>
</template>
<script>
export default {
  data () {
      return {
          name:'我是子组件里面的数据'
      }
  },
  methods:{
      getParent(){
          console.log(this.$parent.title) 
          this.$parent.run()
      }
  },
  props:['title','run','home'] 
}
</script>