有時候我們經常分不清什麼是父元件，什麼又是子元件。現在來簡單說下：我們將某段程式碼封裝成一個元件，而這個元件又在另一個元件中引入，而引入該封裝的元件的檔案叫做父元件，被引入的元件叫做子元件。以上是我個人的理解含義，那麼現在就直接上程式碼吧！

子元件：

<template>
  <div>
    {{msg}}
  </div>
  <p>{{hello}}</p>
  <p>{{hellotests}}</p>
  <button @click="btns">按鈕</button>
</template>
<script>
export default{
  data(){
    return{
　　　// 子元件中宣告的變數
      msg:'',
      hello:'',
      hellotests:''
    }
  },
  created(){

  },
  watch:{
    // 監聽從父元件傳過來的資料是否發生改變，然後賦值給變數
    CCCount() {
      this.msg = this.msgTest
      this.hello = this.helloTest
    }
  },
  methods:{
    // 點選按鈕，子元件操做父元件中的函式
    btns(){
      this.$emit('childsClick', '子元件觸發父元件中的函式')
    },
    //　被父元件呼叫的子元件函式    
    msgs1(){
      this.hellotests = '哈哈，我是父元件呼叫子元件的函式'
    }
  },
  // 接收從父元件傳過來的資料
  props:['msgTest', 'helloTest', 'CCCount']
}
</script>
 

父元件：

<template>
  <div>
   test
  </div>
  <p>hello world</p>
  <span>{{btnVal}}</span>
  <msgChild
    ref="msgRef"
    @childsClick="btnClick"
    :msgTest='msgTest2'
    :helloTest='helloTest2'
    :CCCount='CCCount'
  >
  </msgChild>
</template>
<script>
　// 引入子元件　
  import msgChild from './test.vue'
  export default{
    data(){
      return{
        msgTest2:'',
        helloTest2:'',
        CCCount:0,
        btnVal:''
      }
    },
    components:{
      // 宣告子元件名字  
      msgChild
    },
    created(){
      this.msgs()
    },
    methods:{
      msgs(){
　　　  // 給子元件變數賦值
        this.msgTest2 = '測試1'
        this.helloTest2 = '測試2'
      },
      btnClick(val) {
        this.CCCount++
        this.btnVal = val
        // 觸發子元件中的函式    
        this.$refs.msgRef.msgs1()
      }
    }
  }
</script>
 

從父元件程式碼可知，test.vue是子元件，並且在父元件中被命名成 msgChild ,我們在父元件中放置子元件的位置直接寫子元件的名字即可，這樣就是相當於放置了整個子元件。

先說父元件是怎麼傳值給子元件的：我們從父元件可知有這些變數，

:msgTest='msgTest2'
:helloTest='helloTest2'
:CCCount='CCCount'

例如：msgTest就是子元件接收的變數（無需再在子元件中宣告），需要在子元件中的props中接收（　props:['msgTest', 'helloTest', 'CCCount']　）。msgTest2是父元件的變數，需要在父元件中宣告。我只需要在父元件中給msgTest2賦值即可，子元件中的this.msgTest便能接收到。

那麼子元件是怎麼向父元件中傳值的呢？是通過觸發父元件中的函式，並傳遞一個引數來完成傳值的，例如：

this.$emit('childsClick', '子元件觸發父元件中的函式')

觸發父元件中的@childsClick="btnClick"來呼叫btnClick方法，並向btnClick方法傳參 '子元件觸發父元件中的函式' ，　通過觸發方法來向父元件傳值。

父元件又是如觸發子元件中的函式呢？答案是通過父元件中的 ref 來觸發的，父元件中的　this.$refs.msgRef.msgs1()　便是觸發子元件中的msgs1()函式。