Vue2、Vue3双向绑定封装组件例子

Vue2、Vue3双向绑定封装组件例子:本文将讲述如何使用Vue2和Vue3的双向绑定功能,来创建封装组件,并且提供了一个实际的示例

image-20230227161052962

Vue2

以下是一个简单的双向绑定组件示例,使用 Vue 的 v-model 指令来实现数据的双向绑定:

<template>
  <div>
    <label for="input">输入:</label>
    <input
      type="text"
      id="input"
      :value="value"
      @input="emit('input',event.target.value)"
    />
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      required: true,
    },
  },
};
</script>

在这个示例中,组件接受一个名为 value 的 prop,用于传递输入框的值。在模板中,使用 :value 绑定输入框的值到 value prop 上,实现初始值的渲染。同时,使用 @input 监听输入框的输入事件,并通过 $emit 方法触发名为 input 的自定义事件,传递输入框的新值作为参数。这样,父组件就可以通过 v-model 指令将数据双向绑定到这个组件上。

假设父组件中有一个名为 text 的 data 属性,可以像这样使用这个组件:

<template>
  <div>
    <my-input v-model="text" />
    <p>输入的文本是:{{ text }}</p>
  </div>
</template>

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

export default {
  components: {
    MyInput,
  },
  data() {
    return {
      text: '',
    };
  },
};
</script>

Vue3

在这个示例中,通过 v-model 指令将父组件的 text 数据属性双向绑定到 MyInput 组件的 value prop 上,实现了输入框值的同步更新。同时,通过模板插值将 text 数据属性渲染到页面上,实时显示输入框中的文本。

<template>
  <div>
    <label for="input">输入:</label>
    <input
      type="text"
      id="input"
      :value="modelValue"
      @input="emit('update:modelValue',event.target.value)"
    />
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  props: {
    modelValue: {
      type: String,
      required: true,
    },
  },
});
</script>

在这个示例中,组件使用了新的 defineComponent API 来定义组件。组件接受一个名为 modelValue 的 prop,用于传递输入框的值。在模板中,使用 :value 绑定输入框的值到 modelValue prop 上,实现初始值的渲染。同时,使用 @input 监听输入框的输入事件,并通过 $emit 方法触发名为 update:modelValue 的自定义事件,传递输入框的新值作为参数。这样,父组件就可以通过 v-model 指令将数据双向绑定到这个组件上。

假设父组件中有一个名为 text 的 data 属性,可以像这样使用这个组件:

<template>
  <div>
    <MyInput v-model="text" />
    <p>输入的文本是:{{ text }}</p>
  </div>
</template>

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

export default {
  components: {
    MyInput,
  },
  data() {
    return {
      text: '',
    };
  },
};
</script>

在这个示例中,通过 v-model 指令将父组件的 text 数据属性双向绑定到 MyInput 组件的 modelValue prop 上,实现了输入框值的同步更新。同时,通过模板插值将 text 数据属性渲染到页面上,实时显示输入框中的文本。

© 版权声明
THE END
喜欢就支持一下吧
点赞11 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容