Vue2-props--prop

prop

在 Vue.js 中，props 可以传递以下类型的数据：String / Number / Boolean / Array / Object / Date / Function / Symbol / Promise。

prop 可以通过静态方式传递或者动态方式传递给子组件。

• 静态传递：直接在标签上使用 propName="staticValue" 的形式进行传递。除去 String 类型的数据外，静态传递其他类型的数据时，需要使用 : 或 v-bind 来告诉 Vue，这是一个 JavaScript 表达式而不是一个字符串。
• 动态传递：使用 : 或 v-bind 指令可以将一个变量的值动态地绑定到 prop 上，例如 :propName="dynamicValue" 或 v-bind:propName="dynamicValue。

（1）定义父组件

<div id="app">
  <my-component
    static-str="hello from static string"
    :static-num="100"
    :static-bool="false"
    :static-arr="[4, 5, 6]"
    :static-obj="{ key: 'hello from static object' }"
    :dynamic-str="dynamicStr"
    :dynamic-num="dynamicNum"
    :dynamic-bool="dynamicBool"
    :dynamic-arr="dynamicArr"
    :dynamic-obj="dynamicObj"
    :dynamic-date="dynamicDate"
    :dynamic-func="dynamicFunc"
    :dynamic-symbol="dynamicSymbol"
    :dynamic-promise="dynamicPromise"
  ></my-component>
</div>

<script>
  new Vue({
    el: "#app",
    data: {
      dynamicStr: "hello from dynamic string",
      dynamicNum: 200,
      dynamicBool: true,
      dynamicArr: [1, 2, 3],
      dynamicObj: { key: "hello from dynamic Object" },
      dynamicDate: new Date(),
      dynamicFunc: function () {
        return "hello from dynamic function";
      },
      dynamicSymbol: Symbol("hello from dynamic symbol"),
      dynamicPromise: new Promise((resolve) => {
        setTimeout(() => {
          resolve("hello from dynamic promise");
        }, 2000);
      }),
    },
  });
</script>

（2）定义子组件

Vue.component("my-component", {
  props: {
    // 静态传参
    staticStr: String,
    staticNum: Number,
    staticBool: Boolean,
    staticArr: Array,
    staticObj: Object,
    dynamicStr: String,
    dynamicNum: Number,
    dynamicBool: Boolean,
    dynamicArr: Array,
    dynamicObj: Object,
    // 动态传参
    dynamicDate: Date,
    dynamicFunc: Function,
    dynamicSymbol: Symbol,
    dynamicPromise: Promise,
  },
  data: function () {
    return { dynamicPromiseData: "" };
  },
  watch: {
    dynamicPromise: {
      handler(newPromise) {
        newPromise.then((res) => {
          this.dynamicPromiseData = res;
        });
      },
      immediate: true,
    },
  },
  template: `
      <div>
        <p>Static String: {{ staticStr }}</p>
        <p>Dynamic String: {{ dynamicStr }}</p>
        <p>Static Number: {{ staticNum }}</p>
        <p>Dynamic Number: {{ dynamicNum }}</p>
        <p>Static Boolean: {{ staticBool }}</p>
        <p>Dynamic Boolean: {{ dynamicBool }}</p>
        <p>Static Array: {{ staticArr }}</p>
        <p>Dynamic Array: {{ dynamicArr }}</p>
        <p>Static Object: {{ staticObj }}</p>
        <p>Dynamic Object: {{ dynamicObj }}</p>
        <p>Dynamic Symbol: {{ dynamicSymbol.toString() }}</p>
        <p>Dynamic Date: {{ dynamicDate }}</p>
        <p>Dynamic Function: {{ dynamicFunc() }}</p>
        <p>Dynamic Promise: {{ dynamicPromiseData }}</p>
      </div>
      `,
});