(我看起來應該就是跳台沒錯)

props

props是寫在component裡面的，直接先來看官網通过 Prop 向子组件传递数据
另外props是单向数据流的傳遞，為避免內部元件改變外部元件。
(官網中提到的博文是指部落格文章，剛開始看到我還想了幾秒。)
兩者共用可以讓我們達到在 html寫出這樣的語法且能夠編譯出來：

<blog-post // Vue.component('blog-post',...)
  v-for="post in posts" // posts來自 data
  v-bind:key="post.id" // 注意動態資料要 bind， key跟title來自props宣告
  v-bind:title="post.title"
></blog-post>

  new Vue({
  el: '#blog-post-demo',
  data: {
    posts: [
      { id: 1, title: 'My journey with Vue' },
      { id: 2, title: 'Blogging with Vue' },
      { id: 3, title: 'Why Vue is so fun' }
    ]
  }
})

先前有說過，我們在component裡面的資料要用function return出來，
現在透過props來連結data，讓資料更集中，管理上更便利。

props的駝峰命名

官網Prop

在html中，attribute對大小寫不敏感，props中的駝峰命名若要在html使用，必須全部使用小寫，且用dash(-)隔開：例如 backgroundPng 要寫作 background-png

props的型別

可以為props傳遞的資料指定型別，數值在靜態屬性是傳入字串，但我們可能需要用來運算，所以指定成Number

props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object
}

另外還能指定多個可能的型別、若沒有預先傳入資料的預設值，參考官網：Prop 验证

靜態傳遞與動態傳遞

最簡單的判別就在於我們自定義的attribute在html使用時前面有沒有加冒號(v-bind:)

Vue.component('blog-post', {
  props: ['title'],
  template: '<h3>{{ title }}</h3>'
})

<blog-post title="My journey with Vue"></blog-post>

這樣就是靜態

<blog-post v-bind:title="post.title"></blog-post>

這樣是動態

要非常注意處理傳遞型別的問題，如果沒有使用動態，那就會全部視為string

emit

從內部向外傳遞。
vm.$emit( eventName, […args] )
這邊滿容易搞亂的，不過後來筆者有發先一些端倪，就是將 HTML 裡的 tagName 在腦中調換成 template的內容，但 v-on 呼叫的方法也要先留著，如果 $emit 有帶參數(可以是arr)，就會傳給呼應的 root method 當成它的參數。

<div id="emit-example-argument">
  <magic-eight-ball v-on:give-advice="showAdvice"></magic-eight-ball>
  //這裡的 tag name 去找 component/template 換過來，並把 @give-advice="showAdvice" 記起來
</div>

//JS
Vue.component('magic-eight-ball', {
  data: function () {
    return {
      possibleAdvice: ['Yes', 'No', 'Maybe']
    }
  },
  methods: {
    giveAdvice: function () {
      var randomAdviceIndex = Math.floor(Math.random() * this.possibleAdvice.length)
      this.$emit('give-advice', this.possibleAdvice[randomAdviceIndex])
    }
  },
  template: `
    <button v-on:click="giveAdvice">
      Click me for advice
    </button>
  `
  //我們可在此看到 @click 會觸發帶有參數的 giveAdvice() $emit
  //在上面 methods 找到參數是 this.possibleAdvice[randomAdviceIndex]，這會傳給 showAdvice
})

new Vue({
  el: '#emit-example-argument',
  methods: {
    showAdvice: function (advice) {
      alert(advice)
    }
  }
})

也就是說template @click觸發giveAdvice()，
giveAdvice()帶著參數 emit 給give-advice，
give-advice連著參數給予並觸發showAdvice()

小結

props筆者也不知該怎麼淺白舉例，另外還有一個 v-if在ajax的用法在官網找不到，所以只能提示到此，鼓勵各位觀眾買課程支持一下台灣的講師～ 沒收錢不是業配也不是員工，只是一介草民謝謝