Vue——双向绑定制作组件

1. 父组件

// ① 导入
import labelInput from '../../../components/public/labelInput/labelInput'
export default {
  name: 'skList',
  components: { labelInput }, // ② 声明
  data () {
    return {
      branch: '' // 网点
    }
  },
}

// ③ 调用

<labelInput
    label="所属设备"
    v-model="branch"
    placeholder="请输入设备名称"
></labelInput>

2. 子组件制作

<template>
  <div class="labelInput">
    <span v-text="label"></span>
    <el-input
      class="input"
      type="text"
      size="mini"
      v-model="currentValue"
      :placeholder="placeholder"
    ></el-input>
  </div>
</template>

<script>
export default {
  name: 'labelInput',
  props: {
    label: {
      default: ''
    },
    placeholder: {
      default: ''
    },
    // 接收一个由父级组件传递过来的值
    value: {
      default: function () {
        return ''
      }
    }
  },
  computed: {
    currentValue: {
      // 动态计算currentValue的值
      get: function () {
        return this.value // 将props中的value赋值给currentValue
      },
      set: function (val) {
        this.$emit('input', val) // 通过$emit触发父组件
      }
    }
  }
}
</script>