Vue 3 用實作帶你看過核心概念 - Day 18：父組件向子組件傳值 - props

<div id="app">
  <child-component-a :special-msg="specialMsg"></child-component-a>
  <child-component-b :special-msg="specialMsg"></child-component-b>
</div>

// 根組件
const rootComponent = {
  data() {
    return {
      specialMsg: "hello vue!"
    };
  },
  components: { childComponentA, childComponentB }
};

<!-- childComponentA 畫面 -->
<template id="childComponentA">
  <p>childComponentA title：{{ specialMsg }}</p>
</template>

<!-- childComponentB 畫面 -->
<template id="childComponentB">
  <p>childComponentB title：{{ specialMsg }}</p>
</template>

const childComponentA = {
  // 陣列定義 props，無型別的定義
  props: ["specialMsg"],
  template: "#childComponentA"
};

const childComponentB = {
  // 物件定義，搭配型別限制
  props: {
    specialMsg: String
  },
  template: "#childComponentB"
};

<template id="child">
  <!--   使用 data 初始化 props 值(初始化執行後不會變更) -->
  <p>newCount：{{ newCount }}</p>
  <!--   使用 computed 格式化 props 值(監聽 props 變化執行函數) -->
  <p>doubleCount：{{ doubleCount }}</p>
</template>

const childComponent = {
  props: ["count"],
  template: "#child",
  data(){
    return{
      newCount: this.count + 1
    }
  },
  computed: {
    doubleCount() {
      return this.count + this.count;
    }
  }
};

<div id="app">
  <child-component :count="count"></child-component>
  <button @click="add" type="button"> +1</button>
</div>

const rootComponent = {
  data() {
    return {
      count: 10
    };
  },
  methods: {
    add() {
      this.count += 1;
    }
  },
  components: { childComponent }
};

const rootComponent = {
  data() {
    return {
      userInfo: {
        name: "Antonio",
        age: 25,
      }
    };
  },
  components: { childComponent }
};

<div id="app">
  <!--     以下兩種達到的效果相同 -->
  <child-component v-bind="userInfo"></child-component>
  <child-component :name="userInfo.name" :age="userInfo.age"></child-component>
</div>

<template id="child">
  <div class="card">
    <p>姓名：{{ name }}</p>
    <p>標題：{{ age }}</p>
  </div>
</template>

<div id="app">
  <div class="parent-content">
    <h2>我是 parent-content</h2>
    <li v-for="product in productList" :key="product.id">
      名稱：<input type="text" v-model="product.name">
      價格：<input type="text" v-model="product.price">
    </li>
  </div>
  <div class="child-content">
    <h2>我是 child-content</h2>
    <child-component v-for="product in productList" :key="product.id" :product-info="product"></child-component>
  </div>
</div>

const childComponent = {
  props: {
    // 檢查型別是否為 Number 或 String
    inputVal: [Number, String],
    // 檢查型別是 Number 且為必填
    count: {
      type: Number,
      required: true
    },
    // 檢查型別是 String，非必填，設定 undefined 情況下的預設值
    title: {
      type: String,
      default: "子組件預設標題"
    },
    // 檢查型別是 Object，非必填，設定預設物件格式
    // params：代表 props 物件，可以讀取其他 props 值(這邊讀取上面定義的 title)
    userInfo: {
      type: Object,
      // params：傳入的 props 物件值
      default(params) {
        return { name: "預設人員名稱", age: "xxxx", title: params.title };
      }
    },
    // 檢查型別是 String，非必填，設定預設值 big
    // 設定驗證器：回傳規則是 true 通過驗證， false 則是未通過
    // value：代表傳入的參數值
    status: {
      type: String,
      default: "big",
      validator(value) {
        return ["big", "medium", "small"].includes(params);
      }
    }
  },
  template: "#child"
};

<template id="child">
  <div class="card">
    <h2>{{ title }}</h2>
    <p>Count：{{ count }}</p>
    <p>{{ userInfo }}</p>
    <p>狀態：{{ status }}</p>
  </div>
</template>

<div id="app">
  <div class="card-group">
    <child-component title="父組件傳入的標題" :count="count"></child-component>
    <child-component :user-Info="userInfo" :count="count"></child-component>
    <child-component status="fail" :count="count"></child-component>
    <child-component :status="status" :count="count"></child-component>
  </div>
</div>

const rootComponent = {
  data() {
    return {
      count: 0,
      userInfo: { name: "Antonio", age: 16 },
      status: "small"
    };
  },
  components: { childComponent }
};