VUE 父组件与子组件交互
1. 概述
1.1 说明
在项目过程中,会有很多重复功能在多个页面中处理,此时则需要把这些重复的功能进行单独拎出,编写公用组件(控件)进行引用。在VUE中,组件是可复用的VUE实例,此时组件中的data必须是一个函数,因为data是一个函数时,每次引用此组件时相当于重新对返回对象进行独立的拷贝(实例化/new),如果data不是一个函数而是一个对象,那么多个引用同一组件时其中一个引用更改数据,其他引用中的数据都会更改。由于业务的不同,组件中的数据交互也会不同。
1.2 父组件向组件传递数据(Prop)
Prop可以在组件上注册一些自定义特性,当一个值传递给一个prop特性的时候,它就变成了那个组件(子组件)实例的一个属性,可以像访问data中的值一样去访问prop中的特性(属性列表)。任何类型的值都可以传给一个prop,prop使得其父子prop之间形成一个单向下行绑定,即数据是在父组件中更改后才绑定到子组件中,父组件每次发生更新,子组件中所有的prop都将会刷新为最新的值。
prop的常见书写方式如:
-
- props: ['name', 'address', 'desc']
- props: { name: String, address: String, desc: String, userInfo: Object }
1.2.1 子组件示例代码
子组件props中需要包含父组件流向的数据信息,以便显示在子组件中。
<template> <div class="child-wrap"> <p>姓名:{{name}}</p> <p>性别:{{sex}}</p> <p>年龄:{{age}}</p> </div> </template> <script> export default { props:{ name:{ type:String, default:'' }, sex:{ type:String, default:'' }, age:{ type:Number, default:0 } } } </script> <style scoped> </style>
1.2.2 父组件示例代码
父组件中对子组件传递的数据像使用属性一样的去传递。
<template> <div class="parent-wrap"> <child-component :sex="pSex" :name="pName" :age="pAge"></child-component> </div> </template> <script> import child from './child/child' export default { data() { return { pSex:'男', pName:'张三', pAge:28 } }, components: { "child-component": child }, } </script> <style scoped> </style>
1.3 父组件调用子组件事件
父组件直接访问子组件时,需要使用ref为子组件指定一个引用ID,渲染完成后即为指定子组件的实例,即可操作其内方法。
1.3.1 子组件示例代码
子组件methods中需要包含父组件所调用的子组件方法,可以传递参数值从父组件至子组件,以便来更改或操作子组件中的某些数据。
<template> <div class="child-wrap"> <button @click="confirmClick">子组件按钮</button> </div> </template> <script> export default { methods: { confirmClick(val) { console.log(val) } } } </script> <style scoped> </style>
1.3.2 父组件示例代码
在父组件中,子组件使用ref来注册引用信息,引用信息将会注册在父组件的$refs对象上。
注意:ref被用来给元素或子组件注册引用信息,如果是dom元素,引用只想的就是dom元素,如果是组件,引用就指向组件实例。
ref注册时间:ref本身是作为渲染结果被创建的,在初始渲染的时候不能够进行访问它。
<template> <div class="parent-wrap"> <child-component ref="child"></child-component> <button @click="parentClick" class="btnClass">父组件按钮</button> </div> </template> <script> import child from './child/child' export default { data() { return {} }, components: { "child-component": child }, methods: { parentClick() { this.$refs.child.confirmClick("父组件调用"); } } } </script> <style scoped> </style>
1.4 子组件触发父组件事件
在子组件里用$emit向父组件触发一个事件,父组件监听这个事件。
1.4.1 子组件示例代码
子组件methods中去注册能够调用父组件方法的入口。
<template> <div class="child-wrap"> <button @click="confirmClick">子组件按钮</button> </div> </template> <script> export default { methods: { confirmClick() { this.$emit('child-click','点击了子组件按钮') } } } </script> <style scoped> </style>
1.4.2 父组件示例代码
父组件的子组件中使用事件进行监听所需调用的方法,其中@后跟随的是子组件中注册的自定义事件名,后边所调用的方法为父组件中所定义的方法名。
<template> <div class="parent-wrap"> <child-component @child-click="childClick"></child-component> <p>{{strChild}}</p> </div> </template> <script> import child from './child/child' export default { data() { return { strChild:'' } }, components: { "child-component": child }, methods: { childClick(val) { this.$data.strChild=val; } } } </script> <style scoped> </style>
注意:也可直接props传递方法进行子组件调用父组件方法。
- Visual Studio 2013 Web开发
- 初识Opserver,StackExchange的监控解决方案
- OstrichNet 简易统计信息收集工具
- 百度地图开发1
- 开源消息队列:NetMQ
- 自然语言处理如何检查拼写错误?(Tensorflow实例教程、源代码)
- 仿qq登录界面
- 搭建Linux+Jexus+MariaDB+ASP.NET[LJMA]环境
- WindowsMobile/Win Form-界面自适应
- 搜索附近人和商铺功能
- 通过Mono 在 Heroku 上运行 .NET 应用
- 百度地图聚合
- LVS DR模式 RealServer 为 Windows 2008 R2配置
- android画图之贝塞尔曲线讲解
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android中使用ListView模拟微信好友功能
- Android实现压缩字符串的方法示例
- Android使用OkHttp请求自签名的https网站的示例
- Android Notification 使用方法详解
- Android空心圆及层叠效果实现代码
- 如何更改Dialog的标题与按钮颜色详解
- Android编程之数据库的创建方法详解
- android studio集成ijkplayer的示例代码
- Android开发实现浏览器全屏显示功能
- Android动态人脸检测的示例代码(脸数可调)
- Android抽奖轮盘的制作方法
- Android 获取屏幕的多种宽高信息的示例代码
- Android编程实现禁止StatusBar下拉的方法
- Android自定义view圆并随手指移动
- Android仿微信发送语音消息的功能及示例代码