props/$emit、v-model、.sync的适用场景 -- vue组件通信系列
vue组件的数据通信方式很多,本篇着重讲props/$emit
,神助是v-model/.sync
语法糖。
TL;DR
- props/$emit是父子组件最常用的通信方式,而v-model、.sync只是其语法糖
- 子组件只是单一的修改某个父组件值的话,表单类组件使用
v-model
语法糖 - 子组件只是单一的修改某个父组件值的话,非表单类组件使用
sync
语法糖 - 复杂逻辑还是老老实实
props/$emit
其实语法糖只是在父组件用的时候更加方便,而子组件该咋样还是咋样。
props/$emit
子组件想要显示父组件的数据,就props
。 子组件想要改变父组件的数据,就$emit
。
留意的点:
- 子组件props里定义的属性名和父组件里的一一对应,注意父组件使用属性的时候用羊肉串格式
- 父组件的监听事件名和子组件的触发事件名必须一模一样
- 子组件触发事件的时候,传过来的参数,父组件可以用
$event
接收
v-model语法糖
v-model是属性value和事件input的语法糖。
没有语法糖的时候,这样写
用v-model的话,父组件就可以少了监听事件,用起来更加方便
v-model的语法糖有其局限性:
- 适用于:触发事件返回的值 正是 属性要改的值,一般是单一属性。比如触发事件返回的值正好就是提title的新值
- 更多逻辑的话,就不适用了
- 更适用于:表单类的组件,因为属性和事件默认是
value
和input
当然特定情况下,可以修改v-model的默认属性,但可读性就不是很好。
export default { name:'ListItem', model:{ prop:'title', input:'changeTitle' } } 复制代码
.sync语法糖
.sync这个语法糖,同样适用于触发事件返回的值 正是 属性要改的值,可读性要强一些,可以用于非表单类的组件。 .sync语法糖默认是 属性xxx和事件update:xxx
没有语法糖的时候,这样写
用.sync的话,父组件仍然可以少监听事件,用起来更加方便
sync的语法糖有其局限性:
- 适用于:触发事件返回的值 正是 属性要改的值,一般是单一属性。比如触发事件返回的值正好就是提title的新值
- 更多逻辑的话,就不适用了
- 更适用于:非表单类的组件
总结
- props/$emit是父子组件最常用的通信方式,而v-model、.sync只是其语法糖
- 子组件只是单一的修改某个父组件值的话,表单类组件使用
v-model
语法糖 - 子组件只是单一的修改某个父组件值的话,非表单类组件使用
sync
语法糖 - 复杂逻辑还是老老实实
props/$emit
其实语法糖只是在父组件用的时候更加方便,而子组件该咋样还是咋样。
代码
props/$emit的代码
List.vue
<template lang="pug"> //- 父组件 div //- item就是传递给ListItem的数据,属性是info //- clickLike,就是监听ListItem的clickLike事件 list-item(v-for="(item,index) in list" :key="index" :info="item" v-on:clickLike="change(item,$event)") </template> <script> import ListItem from "@/components/ListItem"; export default { name: "List", components: { ListItem }, data() { return { list: [ { title: "vue3来了", collects: 20 }, { title: "怜怜来了", collects: 2000 } ] }; }, methods: { // 当clickLike事件发生的时候,执行此方法 // 这里的event是ListItem传过来的值 change(item, event) { item.collects = event; } } }; </script> 复制代码
DetailItem.vue
<template lang="pug"> //- 子组件 div h2 {{info.title}} span 喜欢数 {{info.collects}} div button(@click="addCollect") 喜欢 hr </template> <script> export default { name: "ListItem", props: { // 这里定义父组件传过来的属性 info: { type: Object, default: () => ({}) } }, methods: { addCollect() { // 触发此组件的clickLike时间,并且传一个值给父组件 this.$emit("clickLike", this.info.collects + 1); } } }; </script> 复制代码
v-model代码
没有简写时候的代码
<template lang="pug"> //- 父组件 div list-item(:value="title" v-on:input="change") </template> <script> import ListItem from "@/components/ListItem"; export default { name: "List", components: { ListItem }, data() { return { title: "怜怜来了" }; }, methods: { // 当clickLike事件发生的时候,执行此方法 // 这里的event是ListItem传过来的值 change(event) { this.title = event; } } }; </script> 复制代码
<template lang="pug"> //- 子组件 div {{value}} button(@click="changeTitle") 修改标题 </template> <script> export default { name: "ListItem", props: { value: { type: String, default: "" } }, methods: { changeTitle() { this.$emit("input", "换标题啦"); } } }; </script> 复制代码
简写时候的父组件代码
<template lang="pug"> //- 父组件 div list-item(v-model="title") </template> <script> import ListItem from "@/components/ListItem"; export default { name: "List", components: { ListItem }, data() { return { title: "怜怜来了" }; } }; </script> 复制代码
.sync的代码
没有简写的时候
<template lang="pug"> //- 父组件 div list-item(:theme="title" v-on:update:theme="change") </template> <script> import ListItem from "@/components/ListItem"; export default { name: "List", components: { ListItem }, data() { return { title: "怜怜来了" }; }, methods: { // 当clickLike事件发生的时候,执行此方法 // 这里的event是ListItem传过来的值 change(event) { this.title = event; } } }; </script> 复制代码
<template lang="pug"> //- 子组件 div {{theme}} button(@click="changeTitle") 修改标题 </template> <script> export default { name: "ListItem", props: { theme: { type: String, default: "" } }, methods: { changeTitle() { this.$emit("update:theme", "换标题啦"); } } }; </script> 复制代码
简写的时候,父组件的代码
<template lang="pug"> //- 父组件 div //- list-item(:theme="title" v-on:update:theme="change") list-item(:theme.sync="title") </template> <script> import ListItem from "@/components/ListItem"; export default { name: "List", components: { ListItem }, data() { return { title: "怜怜来了" }; } // methods: { // // 当clickLike事件发生的时候,执行此方法 // // 这里的event是ListItem传过来的值 // change(event) { // this.title = event; // } // } }; </script> 复制代码
最后
如果你觉得此文对你有一丁点帮助,点个赞。或者可以加入我的开发交流群:1025263163相互学习,我们会有专业的技术答疑解惑
如果你觉得这篇文章对你有点用的话,麻烦请给我们的开源项目点点star: http://github.crmeb.net/u/defu 不胜感激 !
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
DL4J实战之六:图形化展示训练过程
欢迎访问我的GitHub 这里分类和汇总了欣宸的全部原创(含配套源码):https://github.com/zq2599/blog_demos 本篇概览 本篇是《DL4J实战》系列的第六篇,咱们继续夯实基本功,这次学习的是如何更加形象完整的展示训练过程:图形化页面,效果如下图所示: 接下来选择一个已有的子工程,为其增加图形化界面的效果,我这里选的是《DL4J实战之三:经典卷积实例(LeNet-5)》一文中的<font color="blue">simple-convolution</font>子工程 总的来说本篇由以下内容构成: 基本的图形化功能 图形化数据的持续存储问题 图形化页面的端口配置问题 依赖库配置 首先是添加依赖库,一共需要两步: 打开父工程<font color="blue">dlfj-tutorials</font>的pom.xml,这是管理依赖库版本号的地方,在<font color="blue">dependencies</font>节点确保以下子节点是存在的,这里dl4j-master.ve...
- 下一篇
盘点一下Redis中常用的Java客户端,或者咱们手写一个?
Java中那些Redis的客户端 前面我们的所有操作都是基于redis-cli来完成的,那么我们要在Java中操作Redis,怎么做呢?首先我们先来了解一下Redis Serialization Protocol(Redis序列化协议),这个是Redis提供的一种,客户端和Redis服务端通信传输的编码协议,服务端收到罅隙ihou,会基于这个约定编码进行解码。 打开Wireshark工具,对VMnet8这个网络进行抓包 增加过滤条件 ip.dst_host==192.168.221.128 and tcp.port in {6379} 使用RDM工具连接到Redis Server进行key-value操作,比如执行 set name mic 通过Wireshark工具监控数据包内容,如图3-3所示,可以看到实际发出的数据包是: *3\r\n$3\r\nSET\r\n$4\r\nname\r\n$3\r\nmic 其中*3*代表参数个数,set name mic, 表示三个参数。 $3表示属性长度,$表示包含3个字符。 客户端和服务器发送的命令或数据一律以 \r\n (CRLF回车+换行...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- CentOS8编译安装MySQL8.0.19
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- CentOS7安装Docker,走上虚拟化容器引擎之路
- Linux系统CentOS6、CentOS7手动修改IP地址
- CentOS7编译安装Cmake3.16.3,解决mysql等软件编译问题
- SpringBoot2全家桶,快速入门学习开发网站教程
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- MySQL8.0.19开启GTID主从同步CentOS8
- Windows10,CentOS7,CentOS8安装Nodejs环境