組件資料傳遞 Props (父傳子)

上層的 data 透過 props 往下傳，不會往上傳回 data，所以下層的資料改變不會影響到上層(data)

App.vue

import PropsTest from "@/components/PropsTest.vue";
import { ref } from "vue";
export default {
  components: {
    PropsTest,
  },
  setup() {
    const data = ref("hello Vue!");
    return { data };
  },
};

1	<PropsTest :msg="data" /> // :子層屬性="父層 data"

PropsTest.vue

export default {
  props: ["msg"],
  setup(props) {
    return { props };
  },
};

1	<h1>{{props.msg}}</h1>

Props 型態

props 雖可以為陣列，但建議使用物件表示，物件可以定義型別，還能設定預設值

1
2
3

props: {
  msg: String;
}

props: {
  msg: {
    type: String,
    default: 'HI' // 如上層未設定msg值，會顯示HI
  }
}

Props 定義各個型別的預設值

父層

import PropsTest from "@/components/PropsTest.vue";
import { ref, reactive } from "vue";
export default {
  components: {
    PropsTest,
  },
  setup() {
    const string = ref("string");
    const boolean = ref(true);
    const num = ref(0);
    const array = reactive([]);
    const obj = reactive({});
    const clickFn = () => {};
    return { string, boolean, num, array, obj, clickFn };
  },
};

<PropsTest
  :string="string"
  :boolean="boolean"
  :num="num"
  :array="array"
  :obj="obj"
  :clickFn="clickFn"
/>

子層

export default {
  props: {
    string: {
      type: String,
      default: "string",
    },
    boolean: {
      type: Boolean,
      default: true,
    },
    num: {
      type: Number,
      default: 0,
    },
    array: {
      type: Array,
      default: () => {
        [];
      },
    },
    obj: {
      type: Object,
      default: () => ({}),
      // 等於
      // default: ()=>{
      //   return {}
      // }
    },
    clickFn: {
      type: Function,
      default: () => {},
    },
  },
  setup(props) {
    return { props };
  },
};