Vue 給子組件綁定v-model

父組件使用子組件時，使用v-model指令，在子組件中使用value獲取props的值

父組件

<template>
  <div style="margin:20px;display:flex;align-items:center;">
    <!-- 🚀 給子組件綁定v-model -->
    <bizComp v-model="title"></bizComp>
  </div>
  </div>
</template>
<script>
import bizComp from './bizComp';
export default {
  data: function () {
    return {
      title: 'title define in parent',
    };
  },
  components: {
    bizComp,
  }
}
</script>

子組件

<template>
  <div>
    <div class="box-later-2">{{'父組件在子組件使用v-model,子組件使用value接收父組件的傳參'}}</div>
    <div class="box-later-2">{{value}}</div>
  </div>
</template>
<script>
export default {
  props: {
    // 🚀 子組件使用value接收父組件的傳參
    value: {
      type: String
    }
  },
}
</script>

v-model 和 v-bind:attr

• v-model 是 vue 中 內置的雙向數據綁定指令: 只能用於表單控件!!!

• :model 是 v-bind:model 的簡寫,組件之間傳遞屬性

• <el-button :loading="isLoading" />： 說明 el-button這個組件支持傳遞 prop為loading的屬性