1.在父元件import子元件

2.掛載

3.在佔位符中v-bind傳入資料

4.子元件export default中props引入值

<!-- 簡單資料型別message傳值時複製的是物件，複雜資料型別userinfo引用的是資料地址 -->

父App.vue

<template>
   <div>
    <!-- 簡單資料型別message傳值時複製的是物件，複雜資料型別userinfo引用的是資料地址 -->
    <props :msg="message" :user="userinfo"></props>
   </div>
</template>
<script>
import props from './views/prop.vue'
export default {
  data() {
    return {
     message:'Hello cfy',
     userinfo:{name:'xj',age:18}
    }
  },
​
components:{
  props
},
​
</script>
​
​
 

子prop.vue

<template>
  <div>
    <h3>Props傳值元件</h3>
    <p>msg的值{{msg}}</p>
    <p>user的值{{user}}</p>
  </div>
</template>
<script>
export default {
  props:['msg','user'],
  data() {
   return {
    }
  },
</script>