Vue——双向绑定制作组件

最新推荐文章于 2025-06-04 14:47:51 发布

原创最新推荐文章于 2025-06-04 14:47:51 发布 · 172 阅读

0 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

22 篇文章

订阅专栏

本文详细介绍了在Vue中如何实现父组件与子组件之间的通信，包括子组件的制作过程和父组件如何导入、声明及调用子组件。通过具体代码示例，展示了属性传递、动态计算值以及事件触发等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>