第一種：利用props

父組件定義一個number-to-do，傳給子組件<com-a>
<com-a number-to-do=5></com-a>
子組件在js中定義props數(shù)組
props: ['number-to-do']
就可以在子組件的html中直接取值
{{ numberToDo }}
或者可以定義props對象
props: { 'number-to-do': [Number, String] }
來指定傳來的值是數(shù)字還是字符串

第二種：利用插槽（并不是傳值，只是會在子組件渲染顯示）

父組件在子組件內部寫入數(shù)據(jù)

<com-a>
  <p>123</p>
</com-a>

子組件在html中寫入
<slot></slot>
就可以實現(xiàn)將父組件中寫入的數(shù)據(jù)傳給子組件
我們也可以通過對<slot>進行定義屬性來指定插槽位置
父組件中這樣寫：

<com-a>
  <p slot="oneslot">123</p>
  <p slot="twoslot">456</p>
</com-a>

子組件中這樣寫：

<slot name="oneslot">i am oneslot</slot>
<p>亂七八糟</p>
<slot name="twoslot">i am twoslot</slot>

當指定的slot沒有被引用時，就展示slot標簽中的默認值

第三種：子組件來觸發(fā)emit事件

在子組件中定義一個方法
<button @click="emitMyEvent">emit</button>

emitMyEvent () {
      this.$emit('my-event', this.hello)
    }

在父組件中監(jiān)聽這個emit事件
<com-a @my-event="getMyEvent"></com-a>

getMyEvent (hello) {
      console.log('i get my event' + hello)
    }