大家好!我是木瓜太香!一名前端工程师,之前写过一篇《vue父子组件状态同步的最佳方式》,这篇文章描述了大多数情况下的父子组件同步的最佳方式,也是被开源中国官方推荐了,在这里表示感谢!

这次作为续章是对上一篇文章的特殊情况的补充,并会给出较详细的描述与代码演示,当然如果你单看这篇文章来解决特定问题也是可行的。

对于父子组件状态同步,这篇文章 《vue父子组件状态同步的最佳方式》 讲述了大多数情况下的最优解,但是当我们希望自己创建的可复用组件和封装的逻辑能够尽量行为一致的时候情况可能会有所不同,举个例子,我们现在要封装一个输入框组件叫做 MyInput 我们知道普通的输入框通常会使用 v-model 来做双向数据绑定,这里如果想让封装的 MyInput 组件在使用上与普通的输入框是一致的,我们就难免要让自定义组件也支持 v-model 指令,这之中其实本质上也会涉及到父子组件的状态同步问题,使用我们之前讲的方式也能基本实现,只是借助 vue 暴露出来的 api 可以让我们写法更优雅,接下来我们使用不同的方式来实现这个组件。

原来的实现方式

自定义的MyInput组件

<template>
<div class="myInput">
<!-- 这里只能用 vModel 不可以使用横杠写法 -->
<input type="text" :value="vModel" @input="inputHandle">
</div>
</template> <script>
export default {
name: "MyInput",
props: {
// 这里也可以写成 'v-model': String 但是建议根据风格来,如果左边都没有引号就直接驼峰
vModel: String
},
methods: {
inputHandle (event) {
// 注意:这里使用 update:v-model 或 update:vModel 都可以
this.$emit("update:v-model", event.target.value)
}
} }
</script>

使用方式

// 方式一
<my-input :v-model="text" @update:v-model="text = $event"></my-input>
// 方式二
<my-input :v-model.sync="text"></my-input>

可以看到,原来的方式也能实现,但是就使用来说v-model被当成属性,一定要在前面加上:才可以用动态属性,结果就变成了:v-model,然后我们为了简化写法去掉事件绑定,我们最终的效果就是 :v-model.sync这种写法总会让人觉得怪怪的,接下来我们就来解决这个问题

vue-api的方式实现

自定义的MyInput组件

<template>
<div class="myInput">
<input type="text" :value="value" @input="inputHandle">
</div>
</template> <script>
export default {
name: "MyInput",
props: {
value: String
},
methods: {
inputHandle (event) {
this.$emit("input", event.target.value)
}
} }
</script>

使用方式

<my-input v-model="text"></my-input>

看到这里可能一部分同学会一脸懵逼,这就同步了?emm,其实还真同步了,那 value 从哪儿来的,input 事件也没绑定啊,的确这些都被我们省略掉了,其实这是 vue 的 api 带给我们的便利,在我们试图向自定义组件传入 v-model 这个特殊的属性的时候,vue 会帮我们做两件事,一件是将 v-model 中的值作为 value 的值向下传递,这是我们在内部要写 props value 的原因,另一件是在当前自定义组件上监听 input 事件,并在触发改事件的时候,将第一个参数赋值给 v-model 中的变量。你可以看到在我们肉眼不可见的地方 vue 为我们做了很多实际,但是大家要明白他为什么给你做这么多,仔细想想不难看出,这些逻辑是业务场景中重复次数很多的逻辑, vue 不给你做,你自己也要做,还会闲麻烦!当然这还没结束呢!下面更精彩!

为属性 value 和事件 input 命名

有些时候我们可能希望 value 就作为一个普通的属性往下传,而我们的业务场景里面 input 作为事件也不够形象,反正就是 value 和 input 不符合你的业务中的语义,这个时候我想改名,咋办?接下来看下面的代码:

<template>
<div class="myInput">
<input type="text" :value="text" @input="inputHandle">
</div>
</template> <script>
export default {
name: "MyInput",
model: {
prop: "text", // 该属性名
event: "update:v-model" // 改事件名
}
props: {
text: String // 即便改名了,这里也必不可少
},
methods: {
inputHandle (event) {
this.$emit("update:v-model", event.target.value)
}
} }
</script>

上面就展示了我们怎么更名,其实就是改变了 props 中的接受的字段名,然后新增了 model 选项,这里需要注意的是,不管怎么样 props 中的字段都必不可少。

实际应用:父子组件状态同步

如标题所说,这个 api 依然可以用作一些特殊情况下的父子组件状态同步,这里举一个实际的列子,假设我们使用某框架,这个框架提供给我们模态框组件名叫 Modal 这个组件需要添加 v-model 属性来显示隐藏模态框,通常我们的模态框会有很多的逻辑,这个时候我们会考虑将其封装成一个自定义的组件,这个时候我们希望封装过得组件和原来的模态框组件具备相同的使用方式都是加 v-model 来显示隐藏,这是时候我们讲到的功能是不是就特别合适了呢?

有前端问题需要讨论的可以加我的qun:237871108。也可以通过哔哩哔哩搜索木瓜太香找到我。

vue父子组件状态同步的最佳方式续章(v-model篇)的更多相关文章

  1. vue父子组件路由传参的方式

    一.get方式(url传参): 1.动态路由传参: 父组件: selectItem (item) { this.$router.push({ path: `/recommend/${item.id}` ...

  2. 【Vue课堂】Vue.js 父子组件之间通信的十种方式

    这篇文章介绍了Vue.js 父子组件之间通信的十种方式,不管是初学者还是已经在用 Vue 的开发者都会有所收获.无可否认,现在无论大厂还是小厂都已经用上了 Vue.js 框架,简单易上手不说,教程详尽 ...

  3. vue组件定义方式,vue父子组件间的传值

    vue组件定义方式,vue父子组件间的传值 <!DOCTYPE html> <html lang="zh-cn"> <head> <met ...

  4. vue父子组件之间传值

    vue父子组件进行传值 vue中的父子组件,什么是父组件什么是子组件呢?就跟html标签一样,谁包裹着谁谁就是父组件,被包裹的元素就是子组件. 父组件向子组件传值 下面用的script引入的方式,那种 ...

  5. vue父子组件的传值总结

    久违的博客园我又回来了.此篇文章写得是vue父子组件的传值,虽然网上已经有很多了.写此文章的目的就是记录下个人学习的一部分.接下来我们就进入主题吧! 在开发vue项目中,父子组件的传值是避免不掉的. ...

  6. 【转】vue父子组件之间的通信

    vue父子组件之间的通信 在vue组件通信中其中最常见通信方式就是父子组件之中的通性,而父子组件的设定方式在不同情况下又各有不同.最常见的就是父组件为控制组件子组件为视图组件.父组件传递数据给子组件使 ...

  7. Vue父子组件生命周期

    转载自:https://blog.csdn.net/a8725585/article/details/79092505 vue父子组件钩子函数触发顺序 beforeMount后mounted前构造子组 ...

  8. vue父子组件传值加例子

    例子:http://element-cn.eleme.io/#/zh-CN/component/form         上进行改的 父传子:用prop:子组件能够改变父组件的值,是共享的,和父操作是 ...

  9. vue 父子组件通信详解

    这是一篇详细讲解vue父子组件之间通信的文章,初始学习vue的时候,总是搞不清楚几个情况 通过props在父子组件传值时,v-bind:data="data",props接收的到底 ...

  10. Vue父子组件相互传值及调用方法的方案

    Vue父子组件相互传值及调用方法的方案 一.调用方法: 1.父组件调用子组件方法: 2.子组件调用父组件方法: 参考:https://www.cnblogs.com/jin-zhe/p/9523782 ...

随机推荐

  1. linux上使用google身份验证器(简版)

    系统:centos6.6 下载google身份验证包google-authenticator-master(其实只是一个.zip文件,在windwos下解压,然后传进linux) #cd /data/ ...

  2. windows2012 iis配置

    1.打开“组策略” 单击任务栏里的“windows powershell”, 键入 gpedit.msc,然后按 Enter. 2.修改windows 更新源为未配置.“计算机配置”---“管理模板” ...

  3. JAVA中IO总结

    JAVA中IO流主要分为两大类: 字节流:InputStream+OutputStream 字符流:Reader+Writer 字节流: InputStream是所有字节输入流的父类 OutputSt ...

  4. C#.Net 如何动态加载与卸载程序集(.dll或者.exe)4-----Net下的AppDomain编程 [摘录]

    最近在对AppDomain编程时遇到了一个问题,卸载AppDomain后,在内存中还保留它加载的DLL的数据,所以即使卸载掉AppDomain,还是无法更新它加载的DLL.看来只有关闭整个进程来更新D ...

  5. hadoop中的分布式缓存——DistributedCache

    分布式缓存一个最重要的应用就是在进行join操作的时候,如果一个表很大,另一个表很小很小,我们就可以将这个小表进行广播处理,即每个计算节点 上都存一份,然后进行map端的连接操作,经过我的实验验证,这 ...

  6. MAC环境下生成Apple证书教程

    在MAC操作系统下,生成Apple证书比较简单,全图形化操作. 一.使用Keychain Access(钥匙串访问) MAC操作系统对证书的处理都采用了“Keychain Access”(中文系统名为 ...

  7. c++11 右值引用、move、完美转发forward&lt;T&gt;

    #include <iostream> #include <string> using namespace std; template <typename T> v ...

  8. word插入公式不自动斜体的解决办法

    1.word-视图-宏 2.自己随便输入一个宏名,比如就叫InsertEqua,然后将 Sub InsertEqua() Selection.OMaths.Add Range:=Selection.R ...

  9. (转)Awesome Knowledge Distillation

    Awesome Knowledge Distillation 2018-07-19 10:38:40  Reference:https://github.com/dkozlov/awesome-kno ...

  10. 2.2.1 LinearLayout(线性布局)

    本节引言 本节开始讲Android中的布局,Android中有六大布局,分别是: LinearLayout(线性布局), RelativeLayout(相对布局), TableLayout(表格布局) ...