观前须知:本人演示使用的input是自己手敲的,如果使用的是element-ui等表单组建的input框请选择性参考,不保证我的方法对你们也完全有效 。
父组件代码:这里我的MiniInput
是以组件形式引入的父页面 (这里只贴关键代码)
<template> <div><MiniInputv-for="item in titleArray":key="item.id"><template #miniTitle> {{ item.name }} </template></MiniInput></div></template><script setup lang="ts">import { Ref, ref } from 'vue'import MiniInput from '../components/MiniInput.vue'//用ref包裹数组,方便后期实现双向绑定const titleArray: Ref<Array<TitleArray>> = ref([{name: 'Exclude content',id: 1231,textVal: ''},{name: 'Federated content',id: 1232,textVal: ''},{name: 'Optional retrieval',id: 1233,textVal: ''},])</script>
子组件代码:<template><div class="from__input__mini"><span class="mini-title"><slot name="miniTitle"></slot></span><input class="mini-input" type="text" /></div></template><script setup lang="ts"></script>
上述代码可以得到以下界面效果,这是我们只完成了表面工作(请忽略样式)
文章插图
下面开始正题:首先,我们要打通父子组件的隔阂,先将父组件的textVal传递给子组件,这里我们需要使用到
v-mode
语法,将我们先前定义好的数组内的textVal属性传递过去 。<!-- 下面新增了一行 v-mode --><MiniInputv-model:textVal="item.textVal"v-for="item in titleArray":key="item.id" ><template #miniTitle> {{ item.name }} </template> </MiniInput>
随后我们来到子组件,为接收父组件传递过来的值做准备<script setup lang="ts">// defineProps 用于接收父组件传递过来的参数defineProps<{textVal: string}>()</script>
此时我们就可以给子组件绑定父组件传递过来的参数了<template><div class="from__input__mini"><span class="mini-title"><slot name="miniTitle"></slot></span><input :value="https://www.huyubaike.com/biancheng/textVal" class="mini-input" type="text" /></div></template><script setup lang="ts">// defineProps 用于接收父组件传递过来的参数defineProps<{textVal: string}>()</script>
实现双向绑定但是此时我们会发现,到目前为止我们也仅仅只是接受了父组件传递过来的参数,此时我们去输入框改变内容时,并不会同时改变父组件中的值,那么此时我们就要想办法实现数据流的 双向绑定要实现双向数据响应,首先子组件要使用
defineEmits
接受父组件传递过来的 textVal
的 update
函数,随后我们给输入框添加一个input事件,目的是监听输入内容随后改变父组件中的对应属性 。<template><div class="from__input__mini"><span class="mini-title"><slot name="miniTitle"></slot></span><input :value="https://www.huyubaike.com/biancheng/textVal" @input="changeText" class="mini-input" type="text" /></div></template><script setup lang="ts">// defineProps 用于接收父组件传递过来的参数defineProps<{textVal: string}>()// 要实现双向数据响应要使用 defineEmits 接受父组件传递过来的 textVal 的 update函数const emit = defineEmits(['update:textVal'])// 输入框input事件const changeText = (e: Event) => {// 这里因为ts自动类型推断会把变量推断为EventTarget,导致没办法读取到.value属性,所以要进行一个类型断言const target = e.target as HTMLInputElementemit('update:textVal', target.value)}</script>
这时我们就可以回到父组件中,为父组件的数组添加一个监听事件:
经验总结扩展阅读
- 2023年10月17日给佛像开光好不好 2023年10月17日是给佛像开光吉日吗
- 给彼此空间没有生疏反而更甜蜜的星座配对
- 国家反诈中心给我发短信是怎么回事
- 今年平安夜送什么礼物给女朋友合适
- 2023年属龙人农历八月婚嫁如何 哪天结婚吉祥
- 微信怎么群发消息给个人(微信群发文案)
- 给贸易公司起名字大全 简单大气的贸易公司名字推荐
- 2023取名字女孩大全 2023兔年女宝宝起名
- 2023年兔年女宝宝名字 2023兔年女宝宝起名免费
- 旧墙面如何重刷乳胶漆 七大步骤帮你解决问题