<!-- 父元件father.vue -->
<template>
  <div>
    <div>這裡是father元件</div>
    <div>這是父元件要傳給子元件的引數：{{msg}}</div>
    <!-- 1.傳遞：data1為動態引數msg的引數名，名字自定義，與子元件接收引數名同名
    data2為靜態引數的引數名，名字自定義，與子元件接收引數名同名 -->
    <child :data1="msg" data2="777"></child>
  </div>
</template>
<script>
  import child from "./child";
  export default {
      data() {
          return {
              msg:"666"
          }
      },
    components: {
      child
    }
  };
</script>

<!-- 子元件child.vue -->
<template>
  <div>
    <div>這裡是child元件</div>
    <!-- 3.使用：這裡就是接收的父元件引數 -->
    <div>接受的父元件動態引數：{{ data1 }}</div>
    <div>接受的父元件靜態引數：{{ data2 }}</div>
    <div>接受的父元件引數：{{ data }}</div>
  </div>
</template>
<script>
  export default {
    // 2.接收：props接收父元件引數，data1與data2為傳遞引數的引數名，與父元件內同名
    props: ["data1", "data2"],
    data() {
      return {
        data: "預設值"
      };
    },
    // 3.使用：直接用this呼叫
    mounted() {
      this.data = this.data1;
    }
  };
</script>