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的属性