侧边栏壁纸
博主头像
鲨鱼辣椒博主等级

敢想敢干

  • 累计撰写 31 篇文章
  • 累计创建 31 个标签
  • 累计收到 2 条评论

目 录CONTENT

文章目录
vue

vue 父子组件实现model双向绑定

鲨鱼辣椒
2023-12-15 / 0 评论 / 0 点赞 / 443 阅读 / 422 字 / 正在检测是否收录...
  • 在Vue.js中,通过在子组件中使用 v-model 来实现双向绑定,需要在子组件内部使用 model 选项。这允许你将子组件中的一个 prop 和事件关联到父组件的一个属性上。
  • 以下是在子组件中使用 v-model 的示例:
<!-- ChildComponent.vue -->
<template>
  <div>
    <el-input v-model="internalValue" placeholder="请输入"></el-input>
  </div>
</template>

<script>
export default {
  model: {
    prop: 'value',
    event: 'input'
  },
  props: {
    value: String
  },
  data() {
    return {
      internalValue: this.value
    };
  },
  watch: {
    // 监听本地数据变化,更新父组件传递的 value
    internalValue(newValue) {
      this.$emit('input', newValue);
    },
    // 监听父组件传递的 value 变化,更新本地数据
    value(newValue) {
      this.internalValue = newValue;
    }
  }
};
</script>

  • 在这个例子中,通过使用 model 选项,我们将 el-input 的值绑定到了子组件内的 internalValue 数据属性。同时,通过 watch 监听 internalValue 的变化,并在变化时通过 $emit(‘input’, newValue) 来触发 input 事件,从而更新父组件传递的 value。
  • 在父组件中,可以通过使用 v-model 来进行双向绑定:
<!-- ParentComponent.vue -->
<template>
  <div>
    <h1>父组件</h1>
    <!-- 使用 v-model 进行双向绑定 -->
    <ChildComponent v-model="parentValue" />
    <p>父组件的值: {{ parentValue }}</p>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentValue: '初始值'
    };
  }
};
</script>


  • 这样,父组件中的 v-model=“parentValue” 将实现与子组件的双向绑定,子组件内部的值变化会反映到父组件中。
0

评论区