Vue3组件开发-父子组件之间通信的方式
父子组件之间如何进行通信呢?
父组件传递给子组件:通过props属性;
子组件传递给父组件:通过$emit触发事件;
一、父组件传递给子组件
在开发中很常见的就是父子组件之间通信,比如父组件有一些数据,需要子组件来进行展示:
这个时候我们可以通过props来完成组件之间的通信;
什么是Props呢?
Props是你可以在组件上注册一些自定义的attribute;
父组件给这些attribute赋值,子组件通过attribute的名称获取到对应的值;
Props有两种常见的用法:
方式一:字符串数组,数组中的字符串就是attribute的名称;
方式二:对象类型,对象类型我们可以在指定attribute名称的同时,指定它需要传递的类型、是否是必须的、 默认值等等;
Props的数组用法:
1. 数组用法中我们只能说明传入的attribute的名称,并不能对其进行任何形式的限制,接下来我们来看一下对象的写法是如何让我们的props变得更加完善的。
2. 当使用对象语法的时候,我们可以对传入的内容限制更多:
比如指定传入的attribute的类型;
比如指定传入的attribute是否是必传的;
比如指定没有传入时,attribute的默认值;
String
Number
Boolean
Array
Object
Date
Function
Symbol
Prop 的大小写命名(camelCase vs kebab-case)
HTML 中的 attribute 名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符;
这意味着当你使用 DOM 中的模板时,camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名;
非Prop的Attribute
什么是非Prop的Attribute呢?
当我们传递给一个组件某个属性,但是该属性并没有定义对应的props或者emits时,就称之为 非Prop的 Attribute;
常见的包括class、style、id属性等;
Attribute继承
当组件有单个根节点时,非Prop的Attribute将自动添加到根节点的Attribute中:
禁用Attribute继承和多根节点
如果我们不希望组件的根元素继承attribute,可以在组件中设置 inheritAttrs: false:
禁用attribute继承的常见情况是需要将attribute应用于根元素之外的其他元素;
我们可以通过 $attrs来访问所有的 非props的attribute;
多个根节点的attribute
多个根节点的attribute如果没有显示的绑定,那么会报警告,我们必须手动的指定要绑定到哪一个属性上:
二、子组件传递给父组件
什么情况下子组件需要传递内容到父组件呢?
当子组件有一些事件发生的时候,比如在组件中发生了点击,父组件需要切换内容;
子组件有一些内容想要传递给父组件的时候;
我们如何完成上面的操作呢?
首先,我们需要在子组件中定义好在某些情况下触发的事件名称;
其次,在父组件中以v-on的方式传入要监听的事件名称,并且绑定到对应的方法中;
最后,在子组件中发生某个事件的时候,根据事件名称触发对应的事件;
我们封装一个CounterOperation.vue的组件:
内部其实是监听两个按钮的点击,点击之后通过 this.$emit的方式发出去事件;
三、组件间通信案例
<template><div class="tab-control"><div class="tab-control-item" :class="{active: currentIndex == index}" v-for="(title, index) in titles"@click="itemClick(index)"><span>{{title}}</span></div></div>
</template><script>
export default {emits: ["titleClick"],props: {titles: {type: Array,default() {return []}}},data() {return {currentIndex: 0}},methods: {itemClick(index) {this.currentIndex = index;this.$emit("titleClick", index);}}
}
</script><style scoped>.tab-control{display: flex;}.tab-control-item{flex: 1;text-align: center;}.tab-control-item.active{color: brown;}.tab-control-item.active span {border-bottom: 3px solid brown;padding: 5px 10px;}</style>
Home.vue页面
<template><div><!-- 没有定义props时,组件上的属性是定义到非 --><tab-control :titles = "titles" @titleClick = "titleClick"></tab-control><div class="content"><h2>{{contents[currentIndex]}}</h2></div></div>
</template><script>
import TabControl from './TabControl.vue';export default ({components: {TabControl},data() {return {titles: ["衣服","鞋子","裤子"],contents: ["衣服页面","鞋子页面","裤子页面"],currentIndex: 0,}},methods: {titleClick(index) {this.currentIndex = index;}}
})
</script>
Vue3组件开发-父子组件之间通信的方式相关推荐
- vue的组件化+父子组件的通信
文章目录 1.注册组件的基本步骤 1.1 原始的创建方法 1.2语法糖创建方法 2.全局组件与局部组件 2.1 全局组件 2.2 局部组件 2.3语法糖局部组件(最简写法) 3. 父子组件 4.组件中 ...
- vue3语法糖父子组件的通信
vue父子组件的通信 父组件想调用子组件的方法 通过ref属性 获取子组件实例,然后子组件将方法暴露出去,父组件就可以调用子组件的方法 例如父组件点击编辑按钮,弹出添加对话框子组件,要调用对话框子组件 ...
- 【vue】组件以及父子组件通信
目录: 一. 认识组件化 1.1. 什么是组件化? 1.2. Vue的组件化 二. 注册一个组件 2.1. 注册全局组件 2.2. 组件的名称 2.3. 注册局部组件 三. Vue的开发模式 3.1. ...
- 浏览器 调用 vue 组件_父子组件的通信
在前端vue框架中,我们常常使用多个页面组成一个组件来创建项目.每个组件都有其自己的功能,基于组件的体系结构使开发和维护应用程序变得容易.在开发过程中,您可能会遇到需要与其他组件共享数据的情况.在本文 ...
- 微信小程序自定义组件开发即组件间通信详解
自定义组件开发 1.我的工程目录 pages components 自定义组件 2.定义一个组件名称为toast(目录下文件与页面开发一样.js .wxml .wxss .json文件) 在自定义组件 ...
- Vue3(撩课学院)笔记02-创建组件,全局组件,局部组件,父子组件,组件标签化,组件的data数据共享,组件间通讯,props,父传子$ref,子传父$parent
1.创建一个组件 首先要创建一个根组件进行挂载 再创建一个子组件,完成子组件的逻辑 子组件主要使用template模板来完成布局和逻辑 把子组件通过根组件.component的方法挂载到根组件上 &l ...
- Vue3 学习笔记 —— 父子组件传值、插槽、提供/注入、兄弟组件传值、mitt
目录 1. 父子组件传值 1.1 父组件给子组件传值 -- v-bind 1.2 子组件接收父组件的传值 -- defineProps 1.3 设置子组件接受参数的默认值 -- withDefault ...
- vue.js单文件组件中非父子组件的传值
最近在研究vue.js,总体来说还算可以,但是在web开发群里有一些人问在单文件组件开发模式中非父子组件如何传值的问题,今天在这里讲讲,希望对大家有所帮助! 在官网api中的这段讲解很少,也很模糊: ...
- vue父组件、子组件,父子组件交互
Vue父组件调用子组件事件,父子组件交互 vue2 vue父组件向子组件传递数据 or 调用事件 父组件传递数据到子组件 props 传递: <child-c :args="args& ...
最新文章
- PowerBI从SCCM数据库中分析数据和KPI展现
- 内部人看FaceBook
- .net Int16 、(int Int32)、 Int64 的区别
- 如何让页面动起来?支付宝2020新春红包前端3D技术揭秘
- 5G NR SRS (R15)
- ES6 系列之 Babel 是如何编译 Class 的(上)
- 多叉树的前序遍历_多叉树的创建和遍历(为Trie树做准备)
- html大学生活主题班会,我的大学生活主题班会策划书
- 九个编写Dockerfiles的常见错误
- python斗地主游戏源码_Java写的斗地主游戏源码
- java微信订阅号(公众号)开发案例
- 卡方检验有哪些指标?卡方值怎么计算?
- 原生JS将HTML导出生成word文档 有页眉页脚
- 使用CURL抓取https网页报错的一种解决方法
- ORA-12154: TNS: 无法解析指定的连接标识符
- 阿里云国际版购买了服务器后如何下载发票?
- JS 之Node节点的 属性、方法 获取
- 小米MIUI关闭内容中心通知
- 致创业者的一封信[经典励志]
- mysql 空集 赋值_如何在MySQL查询中替换“空集”?
热门文章
- 手机老是弹出系统服务器更新,苹果手机为什么老是会弹出系统更新,是不是要更新呢...
- 【一天时间|JavaScript基础】作用域和闭包
- python求乘积_Python实现求笛卡尔乘积的方法
- 七牛ufop广告过滤服务上线,7-10月免费用
- python3.6 m venv py3_python 3.6 的 venv 模块
- An unexpected error has occurred. Conda has prepared the above report.
- form表单中input元素readonly和disabled属性的区别:
- 一场环球AI大赛,献给青春的最好礼物
- Java毕业设计_旅行社业务及客户服务系统设计与实现
- Ubuntu删除root密码