| vue3中组件的v | 您所在的位置：网站首页 › java中组件是如何分类的原理 › vue3中组件的v |
vue3中组件的v
|
v-model input中使用双向绑定数据
v-model在vue中我们经常用它与input输入框的输入值进行绑定，简单的实现原理大家也应该都知道 通过v-bind绑定value值 及结合@input输入事件动态改变绑定的value值来实现双向绑定，如下vue3实现代码: {{tryText}} import { ref} from "vue" export default { setup(){ let tryText = ref("默认输入值") function handelInput(e) { tryText.value = e.target.value;//ref定义的数据访问和修改需要通过.value } return{ tryText, handelInput } } }相信大家经常使用v-model在ipnut中，现在让我们来看看在组件中如何使用v-model以及它的作用是啥 组件中的v-model组件中如何使用v-model呢？我们来简单实现下 父组件 {{message}} import { ref } from '@vue/reactivity' import HyInput from "../components/HyInput.vue" export default { components: {HyInput }, setup(){ let message = ref("嘿嘿嘿ヽ(*^ｰ^)(^ｰ^*)ノ") return{ message, } } }子组件 O(∩_∩)O哈哈~ export default { props:{ modelValue:String, }, emits:['update:modelValue'], setup(props,context){ function handelClick() { context.emit("update:modelValue","O(∩_∩)O哈哈~") } return{ handelClick, } } }看到这里我们可能会有点疑点 为啥要发射事件呢？为啥会有一个默认的props接收值呢？别急我们从实现原理上看看就懂了 这样我们点击子组件的按钮就可以改变父组件中的message的数据，这就是一个简单的组件中的数据双向绑定v-model实现 既然是双向绑定，那不妨大胆猜测下是否和input中的实现原理相似呢？让我们来看看它的实现原理 父组件 {{message}} import { ref } from '@vue/reactivity' import HyInput from "../components/HyInput.vue" export default { components: {HyInput }, setup(){ let message = ref("嘿嘿嘿ヽ(*^ｰ^)(^ｰ^*)ノ") return{ message, } } }子组件不变哦 O(∩_∩)O哈哈~ export default { props:{ modelValue:String, }, emits:['update:modelValue'], setup(props,context){ function handelClick() { context.emit("update:modelValue","O(∩_∩)O哈哈~") } return{ handelClick, } } }通过结果我们发现确实可以实现 这样我们就能很好理解子组件中的发射事件和默认接收值了，基本实现原理就是：父组件传值给子组件，子组件通过props进行接收，但是在子组件中需要修改改数据时，我们通过发射一个事件告诉父组件，然后父组件接收传递过来的值进行修改。其实就是父子组件之间的通信，不过vue帮我们做了一个简单的封装。 ps:默认v-model绑定的数据在子组件读取需要使用 modelValue来接收 发射事件默认叫update:modelValue ,想绑定多个值或者采用自定义名请看下面的其他写法哦 ps:不能想通过修改props来修改数据，首先这是一个特别不好的开发习惯，然后我们知道props的特性只是负责传递数据，修改props并不能达到我们想要的效果。我们应该通知父组件进行数据更新，这才是最好的做法。 其他写法如果我们子组件中的input和父组件进行双向绑定那该怎么实现呢？以及需要传递多个双向绑定数据呢？自定义名呢？ 父组件 {{message}} {{inputText}} import { ref } from '@vue/reactivity' import HyInput from "../components/HyInput.vue" export default { components: {HyInput }, setup(){ let message = ref("嘿嘿嘿ヽ(*^ｰ^)(^ｰ^*)ノ") let inputText = ref("嘻嘻嘻嘻") return{ message, inputText } } }子组件 O(∩_∩)O哈哈~ import {computed} from "vue" export default { props:{ modelValue:String, text:String }, emits:['update:modelValue',"update:text"], setup(props,context){ function handelClick() { context.emit("update:modelValue","O(∩_∩)O哈哈~") } let customText = computed({ set(value){ context.emit("update:text",value) }, get(){ return props.text } }) return{ handelClick, customText, } } }多个绑定值及改名写法 v-model:text=“inputText” 子组件中props直接是 text 发射事件名是 update:text 这里我们看到为了实现子组件中输入框v-model双向绑定父组件,我们需要借助计算属性computed来实现，可能有同学会想直接绑定props中的text不就可以了吗？还是上面那句话，若只是读取确实可以绑定，但是当你修改的时候是需要通过发射事件通知父组件进行数据更新(不能修改props中的值，只能读!!!).所以在计算属性中我们在set中发射了事件进行父组件数据更新，读取时我们则直接读取props中的值就好了。 end
|
【本文地址】
| 今日新闻 |
| 推荐新闻 |
| 专题文章 |