将一个组件的propName属性与父组件中的variable变量进行双向绑定的vue3(组件传值)

封装组件看这个,然后理解父子组件传值

应用场景:

1.使用v - model语法实现双向绑定(传值两边都不用定义方法接数据)

1.子组件
1. @update:modelValue事件是MultiSelect组件对象自带的事件
2.:options="countries"

options是MultiSelect对象自带的可以接受自定义值的属性

countries是我们封装的接受外部自定义值的属性。。引用关系有点复杂

3.代码
复制代码
<template>
  <div class="card flex justify-center">
    <MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" @update:modelValue="$emit('update:selectedCountries',selectedCountries)" filter placeholder="Select Countries" display="chip" class="w-full md:w-80">

      <template #option="slotProps">
        <div class="flex items-center">
          <div>{{ slotProps.option.name }}</div>
        </div>
      </template>
      <template #dropdownicon>
        <i class="pi pi-map" />
      </template>
      <template #filtericon>
        <i class="pi pi-map-marker" />
      </template>
      <template #header>
        <div class="font-medium px-3 py-2">Available Countries</div>
      </template>
      <template #footer>
        <div class="p-3 flex justify-between">
          <Button label="Add New" severity="secondary" text size="small" icon="pi pi-plus" />
          <Button label="Remove All" severity="danger" text size="small" icon="pi pi-times" />
        </div>
      </template>
    </MultiSelect>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
// import { MultiSelect } from 'primevue/multiselect';
// import { Button } from 'primevue/button';

const props = defineProps({
  // 可以添加自定义的props,例如是否禁用组件等
  disabled: {
    type: Boolean,
    default: false
  },
   countries:{
    type: Array,

     required: true
   },
    selectedCountries:{
      type: Array,

    },
  visible:{
    type: Boolean,
    default: false

  }

});

const selectedCountries = ref([])
// 如果需要根据父组件传入的值改变内部数据结构,可以在这里处理
// 例如:
// if (props.someValue) {
//     // 对countries或者selectedCountries进行操作
// }

// 可以定义内部的方法,如果需要暴露给父组件,可以使用emits
const emit = defineEmits(['update:selectedCountries']);
const emitModelValueChange = () => {
  emit('update:modelValue', selectedCountries);
};
</script>
2.父组件
1.selectedCountries这个变量我们没有在父组件里定义,这个是跟在事件之后的参数,也是我们要传的值
2.selectedUsers这个变量就是父组件所属的了

3.界面效果

2.手动实现双向绑定(不使用v - model语法的传统方式)(传值两边都需要定义方法接数据)

1.子组件
复制代码
<template>
  <div class="card flex justify-center">
<MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" @update:modelValue="emitModelValueChange" filter placeholder="Select Countries" display="chip" class="w-full md:w-80">
      <template #option="slotProps">
        <div class="flex items-center">
          <div>{{ slotProps.option.name }}</div>
        </div>
      </template>
      <template #dropdownicon>
        <i class="pi pi-map" />
      </template>
      <template #filtericon>
        <i class="pi pi-map-marker" />
      </template>
      <template #header>
        <div class="font-medium px-3 py-2">Available Countries</div>
      </template>
      <template #footer>
        <div class="p-3 flex justify-between">
          <Button label="Add New" severity="secondary" text size="small" icon="pi pi-plus" />
          <Button label="Remove All" severity="danger" text size="small" icon="pi pi-times" />
        </div>
      </template>
    </MultiSelect>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
// import { MultiSelect } from 'primevue/multiselect';
// import { Button } from 'primevue/button';

const props = defineProps({
  // 可以添加自定义的props,例如是否禁用组件等
  disabled: {
    type: Boolean,
    default: false
  },
   countries:{
    type: Array,

     required: true
   },
    selectedCountries:{
      type: Array,

    },
  visible:{
    type: Boolean,
    default: false

  }

});

const selectedCountries = ref([])
// 如果需要根据父组件传入的值改变内部数据结构,可以在这里处理
// 例如:
// if (props.someValue) {
//     // 对countries或者selectedCountries进行操作
// }

// 可以定义内部的方法,如果需要暴露给父组件,可以使用emits

//updateSelectedCountries名字随便,爱叫是什么叫什么,只要统一就行

const emit = defineEmits(['updateSelectedCountries']);
const emitModelValueChange = () => {
  emit('updateSelectedCountries', selectedCountries);
};
</script>
2.父组件
3.界面效果

3.为啥一定要传值呢?

因为不同的vue文件要传值,

那为什么不直写在一个组件里?

因为抽出一个组件后,可以复用组件,减少代码量,代码看起来整洁不少。。。。。。。

相关推荐
雪碧聊技术4 分钟前
深入解析Vue中v-model的双向绑定实现原理
前端·javascript·vue.js·v-model
打不着的大喇叭1 小时前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
Sun_light1 小时前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子1 小时前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试
百锦再1 小时前
重新学习Vue中的按键监听和鼠标监听
javascript·vue.js·vue·计算机外设·click·up·down
快起来别睡了1 小时前
Vue 3 中的组件通信与组件思想详解
vue.js
优雅永不过时_v1 小时前
基于vite适用于 vue和 react 的Three.js低代码与Ai结合编辑器
前端·javascript
WildBlue1 小时前
🧊 HTML5 王者对象 Blob - 二进制世界的魔法沙漏
前端·javascript·html
不讲道理的柯里昂2 小时前
Vue MathJax Beautiful,基于Mathjax的数学公式编辑插件
vue.js·开源
啷咯哩咯啷2 小时前
Vue3构建低代码表单设计器
前端·javascript·vue.js