手动实现一个v-model的不同方法（包括封装组件的使用）

因为疫情，估计大部分人都和我一样，宅在家里，偶尔学习一下。这不，遇到了如何手动创建v-model的问题，于是开始学习。在开始之前，我们需要了解一些知识。v-model是一个语法糖，如下：实际上等于：也就是说v-model绑定了一个名为value的props和一个eventinput注意：所以在子组件中，可以使用props定义value来接受value，然后触发input事件通过$emit传递新值并修改。了解了这些知识，接下来我们就开始实现一个自定义的v-model~~1.最简单的实现方式首先是父组件的代码：然后是子组件的代码：我在父组件里面加了一行注释的代码，其实是有帮助的我明白了。不知道有没有朋友和我一样，第一次看到不知道是干什么的呢？哭了。2、使用watch和$emit的实现方式和上面有些类似，只不过上面使用了自身输入事件的功能，通过输入事件的频繁触发，将值传递给父组件。这里，这个过程换成了通过watch监听值的变化，然后通过input事件触发function事件，在function事件中将变化的值提交给父组件。好吧，我只需要修改子组件如下：通过watch监听props值的变化，将值赋值给子组件自己定义的sonVal，并在input中绑定。然后使用输入事件触发函数提交给父组件。3.使用最新的语法和模型属性。本来，我并不知道还有这个属性。在网上搜索v-model的实现方法时，无意中发现了这个属性。查看官方文档如下：也就是说这个属性是为了避免这个名字的props定义的值。我们来看看它的用法。我们先看看如何修改子组件：model属性中的prop是重命名传值的名称，而event是重命名事件的名称，而且，props中传值的名称必须相同作为模型属性中道具的名称。其实只要对比一下第一种方法就知道vue多了一个model属性，这样就可以使用name值了。同样，这里是wacth使用new属性后的样子，只是修改子组件其实没有太多修改，就是想贴出来。那我就手写一个v-model写完，觉得有用的同志们给我点个赞吧。距离分界线公布已经半年多了。最近在用vue2.0封装elementUI。在封装form表单的时候，正好用到这个吃灰很久的东西来记录。首先讲我简单的封装代码上来：复制代码其中filterObject是今天的主角，我的思路在parentcomponent直接传入一个对象，在进行相关操作时，父组件可以直接在外面使用这些值，而不是通过子组件暴露的方式获取这些值（ps：封装搜索组件的时候可以这样做,并对外暴露search和reset方法可以暴露子组件中的值，其实封装search就是s有点类似这个form，都是用elementUI的form形式封装的。)接下来是父组件的代码：复制代码父组件的代码比较简单,直接通过v把-model的值传过去就行了。下面是演示效果。目前在封装表单组件时都会使用这种方式。如果父组件直接传值，子组件不需要提供方法返回值。封装搜索组件时，通过暴露子组件获取值。你为什么这么做？因为search和reset方法在搜索的时候肯定会暴露出来，这个时候拿出来就好了。时隔数月，终于用到了一些东西，特地记录下来，希望对封装组件的各位有所帮助。喜欢的话可以点赞或者收藏。