props: {
    // 基礎(chǔ)的類型檢查 (`null` 和 `undefined` 會通過任何類型驗(yàn)證)
    propA: Number,
    // 多個(gè)可能的類型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 帶有默認(rèn)值的數(shù)字
    propD: {
      type: Number,
      default: 100
    },
    // 帶有默認(rèn)值的對象
    propE: {
      type: Object,
      // 對象或數(shù)組默認(rèn)值必須從一個(gè)工廠函數(shù)獲取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定義驗(yàn)證函數(shù)
    propF: {
      validator: function (value) {
        // 這個(gè)值必須匹配下列字符串中的一個(gè)
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }

根組件
├── App.vue
└── components
    ├── UserName.vue # 用戶名和密碼輸入框
 ?? └── UserInfo.vue # 人生格言和自我介紹框

<template>
  <div>
    <h2>UserName</h2>
    <p>用戶名:<input /> </p>
    <p>密碼:<textarea /> </p>
  </div>
</template>
<script>
export default {
}
</script>

<template>
  <div>
    <button @click="comName = 'UserName'">賬號密碼填寫</button>
    <button @click="comName = 'UserInfo'">個(gè)人信息填寫</button>

    <p>下面顯示注冊組件:</p>
    <div style="border: 1px solid red">
      <!-- vue內(nèi)置的組件component, 可以動(dòng)態(tài)顯示組件 -->
      <component :is="comName"></component>
    </div>
  </div>
</template>
<script>
import UserName from "./UserName";
import UserInfo from "./UserInfo";
export default {
  data() {
    return {
      comName: "UserName",
    };
  },
  components: {
    UserName,
    UserInfo,
  },
};
</script>

<keep-alive>
    <!-- vue內(nèi)置的組件component, 可以動(dòng)態(tài)顯示組件 -->
    <component :is="comName"></component>
</keep-alive>

<keep-alive include="name1,name2">
    <!-- vue內(nèi)置的組件component, 可以動(dòng)態(tài)顯示組件 -->
    <component :is="comName"></component>
</keep-alive>

<div class="container" v-show="isShow">
    <slot name="one"></slot>
    <slot name="two"></slot>
</div>

<Pannel2>
    <template v-slot:one>
		<img src="../assets/mm.gif" alt="" />
    </template>
    <template v-slot:two>
		<span>我是文字哦</span>
    </template>
</Pannel2>

<Pannel2>
    <!-- 簡化寫法 -->
    <template #one>
		<div>
            <p>寒雨連江夜入?yún)?</p>
            <p>平明送客楚山孤。</p>
            <p>洛陽親友如相問，</p>
            <p>一片冰心在玉壺。</p>
        </div>
    </template>
    <template #two>
		<img src="../assets/mm.gif" alt="" />
    </template>
</Pannel2>

<template>
  <div style="border:1px solid #ccc; margin:5px;padding:5px">
    <h2>子組件</h2>
    <!-- 給slot上補(bǔ)充自定義的屬性 -->
    <slot name="content" :a="1" :b="2">
      默認(rèn)內(nèi)容
    </slot>
  </div>
</template>

<script>
export default {
}
</script>

<template>
  <div style="border:1px solid #ccc; margin:5px;padding:5px">
    <h1>45-插槽-作用域插槽</h1>
    <MyCom>
      <!-- 
        v-slot:插槽名="對象" 
      對象會自動(dòng)接收這個(gè)插槽傳遞回來自定義屬性
      -->
      <template v-slot:content="scope">
        <!-- <h1>自定義的內(nèi)容，填坑, {{scope}}</h1> -->
        <h3>{{scope.a}}</h3>
        <p>{{scope.b}}</p>
      </template>
    </MyCom>
  </div>
</template>
<script>
// 父傳子
//  1.傳數(shù)據(jù)。 自定義屬性    （父）  props(子)
//  2.傳結(jié)構(gòu)。 在組件中寫內(nèi)容（父）  slot (子)
import MyCom from './MyCom.vue'
export default {
  components: { MyCom }
}
</script>

<style scoped>
.content{
background-color: #ccc;
}
</style>

{
  data(){},
  methods: {},
  directives: {
    focus: { // 自定義指令名
        inserted(el){ // 固定配置項(xiàng) - 當(dāng)指令插入到標(biāo)簽自動(dòng)觸發(fā)此函數(shù)
            el.focus()
        }
    },
  },
}

<template>
  <div>
    <input type="text" v-focus />
  </div>
</template>

<script>
export default {
  // 注冊
  directives: {
    focus: { // 自定義指令名
        inserted(el){ // 固定配置項(xiàng) - 當(dāng)指令插入到標(biāo)簽自動(dòng)觸發(fā)此函數(shù)
            el.focus()
        }
    }
  }
}
</script>

directives: {
  "color":{
    inserted(el, binding){ // 插入時(shí)觸發(fā)此函數(shù)
      el.style.color = binding.value;
    },
    update(el, binding){ // 更新綁定的變量時(shí)觸發(fā)此函數(shù)=》手動(dòng)更新
      el.style.color = binding.value;
    }
  }
}

<p v-color="theColor" @click="changeColor">使用v-color指令控制顏色, 點(diǎn)擊變藍(lán)</p>
<script>
  data() {
    return {
      theColor: "red",
    };
  },
  methods: {
    changeColor() {
      this.theColor = 'blue';
    },
  },
</script>