1.父元件呼叫子元件

子元件children.vue程式碼如下:

 <template>
   <div>我是子元件</div>
</template>

父元件parent.vue程式碼如下：

<template>
  <div>
     <myChild></myChild>
  </div>
</template>
<script>
  import myChild from './child'; //第一步匯入子元件
  export default
 
 {
            name: 'parent',
            components: {
                myChild
            }, //第二步註冊子元件
            data() {
                return {
        
                }
            }
        }
</script>

此時在子元件中的內容會顯示在元件中，總結：父元件呼叫子元件
（1）在父元件中通過import匯入子元件。
（2）在父元件中使用components:{}註冊子元件。

2.父元件向子元件傳值

在子元件中，寫入一個動態資料message，然後通過props把資料匯出去，為外部父元件呼叫提供一個介面：

子元件程式碼如下：

    <template>
        <div>
        我是子元件，顯示來自父元件的訊息{{message}}
        </div>
    </template>
    <script>
        export default {
            props:["message"],
            data() {
                return
 
 {
        
                }
            }
        }
    </script>

在父元件中給message賦值：

      <template>
            <div>
                <myChild :message="mymsg"></myChild>
            </div>
        </template>
        <script>
            import myChild from './child';
            export default {
                name: 'parent',
                components: {
                    myChild
                },
                data() {
                    return {
                        mymsg: '向子元件傳送訊息：Happy'
                    }
                }
            }
        </script>

在父元件中，在子元件上為:message賦值。
總結，父元件給子元件傳值：子元件中要通過props把變數匯出來，然後在父元件中使用該變數，為該變數賦值。
注：如果父元件傳值為一個靜態的值，也需要使用v-bind來告訴vue，v-bind簡寫為":"

例如：
<myChild v-bind:message="123"></myChild>
簡寫為：
<myChild :message="123"></myChild>

3.為子元件重新命名

在父元件中為子元件重新命名，可以在components中為子元件重新命名，格式如下：

    <template>
        <div>
            <my-child-newname></my-child-newname>
        </div>
    </template>
    <script>
        import myChild from './child';
        export default {
            name: 'parent',
            components: {
                'my-child-newname':myChild
            },
            data() {
                return {
                }
            }
        }
    </script>

4.props用法

props通常是以字串陣列的形式列出，例如：

    props:["name","age","color","job","adress"],

如果希望每個字串都有指定值型別，可以為它定義屬性:

    props:{
                name:String,
                age:Number,
                color:Boolean,
                job:Array,
                adress:Object
            },

當父元件賦值型別不對時，瀏覽器控制檯會提示錯誤資訊。

5.讓一個物件的屬性作為prop傳入

傳入一個物件的所有屬性，如果想讓一個物件的屬性作為prop傳入：
子元件程式碼如下：

    <template>
      <div>我是子元件，顯示來自父元件的訊息{{id}}{{title}}</div>
    </template>
    <script>
    export default {
      props: ["id","title"],
      data() {
        return {};
      }
    };
    </script>

父元件中定義一個物件post，它有兩個屬性，id和title,父元件程式碼如下：

    <template>
      <div>
        <blog-post v-bind="post"></blog-post>
      </div>
    </template>
    <script>
    import myChild from "./child";
    export default {
      components: {
        "blog-post": myChild
      },
      data() {
        return {
          post: {
            id: 1,
            title: "My Journey with Vue"
          }
        };
      }
    };
    </script>

註釋：

     <blog-post v-bind="post"></blog-post>
 等價於
     <blog-post v-bind:id="post.id" v-bind:title="post.title"></blog-post>

6.傳遞靜態或動態prop

傳入一個靜態的值：

<blog-post title="我是標題"></blog-post>

動態賦值：

<!-- 動態賦予一個變數的值 -->
<blog-post :childtitle="post.title"></blog-post>
<!-- 動態賦予一個複雜的表示式的值 -->
<blog-post :childtitle="post.title+'hello'+post.id"></blog-post>

任何型別的值都可以傳給prop,

	<!-- 傳入一個數字 -->
    <blog-post :childtitle1="123"></blog-post>
    <!-- 傳入一個布林值 -->
    <blog-post :childtitle2="false"></blog-post>
    <!-- 傳入一個數組 -->
    <blog-post :childtitle3="[1,2,3,4,5]"></blog-post>
    <!-- 傳入一個物件 -->
    <blog-post :childtitle4="{name:'lisa',age:12}"></blog-post>

7.單向資料流

所有的prop都使得其父子prop之間形成了一個單向下繫結：父級prop的更新會向下流動到子元件中，但是反過來則不行，這樣會防止從子元件意外改變父元件的狀態。
每次父級元件發生更新時，子元件中所有的prop都將會重新整理為最新的值，這意味著你不應該在一個子元件內部改變prop，如果這樣會在瀏覽器控制檯報錯。
這裡有兩中常見的試圖改變一個prop的情形：
（1）這個prop用來傳遞一個初始值，這個子元件接下來希望將其作為一個本地的prop資料來使用，在這種情況下，最好定義一個本地的data屬性並將這個prop用作其初始值。
在子元件中,有兩個變數，childtitle和mycount，把childtitle匯出從父元件獲取值，然後傳給mycount：

<template>
  <div>
    title資料：{{childtitle}}
    <br>
    count資料：{{mycount}}
  </div>
</template>
<script>
export default {
  props: ["childtitle"],
  data() {
    return {
      mycount: this.childtitle
    };
  }
};
</script>

父級元件程式碼中,給childtitle賦值，此時，當點選按鈕時，childtitle的值會變化：

<template>
  <div>
    <span @click="myClick">點選</span>
    <blog-post :childtitle="parcount"></blog-post>
  </div>
</template>
<script>
import myChild from "./child";
export default {
  components: {
    "blog-post": myChild
  },
  data() {
    return {
      parcount: 0
    };
  },
  methods: {
    myClick() {
      this.parcount++;
    }
  }
};
</script>

以上會出現一個問題，當點選按鈕時childtitle的值會跟著變化，但是子元件中mycount的值不會變化，這時mycoun需要使用計算屬性computed才能使值跟著變化，子元件中的程式碼更改如下：

<template>
  <div>
    title資料：{{childtitle}}
    <br>
    count資料：{{mycount}}
  </div>
</template>
<script>
export default {
  props: ["childtitle"],
  data() {
    return {};
  },
  computed: {
    mycount: function() {
      return this.childtitle;
    }
  }
};
</script>

8.prop驗證

我們可以為元件的prop指定驗證要求，例如你知道的這些型別，如果有一個需求沒有被滿足，則Vue會在瀏覽器控制檯發出警告。
為了定製prop的驗證方式，你可以為props中的值提供一個帶有驗證需求的物件，而不是一個字串陣列。例如：

props: {
    //   指定基礎型別檢查
    proA: Number,
    //   可以設定多個型別，該值符合其中一個即可
    proB: [String, Number],
    //    如果該變數必須存在，必填，可以設定required為true，可以通過type設定該值得型別
    proC: {
      type: Number,
      required: true
    },
    // 可以使用default設定預設的值
    proD: {
      type: Number,
      default: 100
    },
    // 可以設定帶有預設值得物件
    proE: {
      type: Object,
      //注：物件或陣列預設值必須從一個工廠函式獲取
      default: function() {
        return {
          meseage: "hello"
        };
      }
    },
    // 可以自定義驗證函式
    proF: {
      validator: function(value) {
        //這個值必須匹配下列字串中的一個
        return ["success", "warning", "danger"].indexOf(value) !== -1;
      }
    }
  },

當父級元件傳過來的值不符合條件，驗證失敗時，vue控制檯會發生警告。
注：prop會在一個元件例項建立之前進行驗證，所以例項的屬性（如data，computed）在default或validator函式中是不可用的。

type型別包括：
String
Number
Boolean
Array
Object
Date
Function
Symbol
注：type還可以是一個自定義的建構函式，並且通過instanceof來進行檢查確認。
例如如下建構函式：

function Person (firstName, lastName) {
  this.firstName = firstName
  this.lastName = lastName
}

可以使用以下方式來驗證prop的值是否通過new Person建立的。

Vue.component('blog-post', {
  props: {
    author: Person
  }
})