父組件import引用子組件
使用子組件時(shí)在子組件上添加一個(gè)v-bind屬性，并綁定上數(shù)據(jù)
在子組件中創(chuàng)建 props ，在props 中創(chuàng)建相同的屬性名，用來接收數(shù)據(jù)
把接收到的數(shù)據(jù)在子組件中使用

子組件中需要發(fā)出該自定義事件，可以是按鈕的點(diǎn)擊事件，也可以是其他方式
將需要傳的值放在 $emit 第二個(gè)參數(shù)的位置，這個(gè)參數(shù)會(huì)被傳給父組件中的響應(yīng)方法
需要在父組件中使用子組件并在子組件標(biāo)簽上綁定對(duì)事件的監(jiān)聽

//父組件
<template>
  <div id="header">  
    <headerchild ref="headerChild"></headerchild>
    <button @click="getChild()">父組件獲取子組件的數(shù)據(jù)和方法</button>
  </div>
</template>
<script>
import HeaderChild from './HeaderChild'
export default {
  data () {
      return {
          title:'我是父組件的數(shù)據(jù)'
      }
  },
  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()">獲取父組件的數(shù)據(jù)和方法</button>
  </div>
</template>
<script>
export default {
  data () {
      return {
          name:'我是子組件里面的數(shù)據(jù)'
      }
  },
  methods:{
      getParent(){
          console.log(this.$parent.title) /*獲取整個(gè)父組件*/
          this.$parent.run()/*獲取父組件的方法*/
      }
  },
  props:['title','run','home'] /*通過props接收父組件傳遞過來的數(shù)據(jù) */
}
</script>