1.靜態傳值（在父元件中賦值好props中屬性的值傳遞給子元件）

父元件

<template>
  <div>
    <input v-model="message">
    <child message="hello"></child>
  </div>
</template>
<script>
  import child from './components/child.vue'
export default{
    components:{
      child
    }
  }
</script
 
>

子元件

<template>
  <p>{{message}}</p>
</template>
<script>
  export default{
    props:['message'],
    data(){

    },
    methods:{
      fun:function(){

      }
    }
  }
</script>

結果：列印hello

2.動態傳遞（根據父元件中值的改變，props動態的改變子元件中的值）

父元件

<template>
  <div>
    <
 
input v-model="message">
    <!--將childmessage與message通過v-bind指令繫結!-->
<child v-bind:childmessage="message"></child>
  </div>
</template>
<script>
  import child from "./components/child.vue"
export default{
    //構建child元件
components:{
      child
    },
    data(){
      return 
 
{
        //初始化message
message:''
}
    }
  }
</script>

2.子元件

<template>
  <div>
    <p>childmessage is:{{childmessage}}</p>
  </div>
</template>
<script>
  export default{
    //將childmessage傳遞給child
props:['childmessage']
  }
</script>

結果：兩者同步改變