自定义组件实现双向绑定

最新推荐文章于 2026-01-01 20:08:21 发布

原创最新推荐文章于 2026-01-01 20:08:21 发布 · 227 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端

大前端专栏收录该内容

30 篇文章

订阅专栏

父组件

<sbind-data v-model="keywords" />

子组件：

<template>
  <div>
    {{ childValue }}
    <el-input v-model="childValue" @input="change" />
  </div>
</template>
 
<script>
  export default {
    name: 'Index',
    props: {
      value: {
        type: [String, Array],
        default: () => {},
      },
    },
    data() {
      return {
        childValue: '',
      }
    },
    watch: {
      value(newValue, oldValue) {
        console.log(oldValue)
        this.childValue = newValue
      },
    },
    mounted() {
      this.childValue = this.value
    },
    created() {},
    methods: {
      change() {
        this.$emit('input', this.childValue)
      },
    },
  }
</script>
 
<style scoped></style>