Vue 进阶组件实战应用 -- 父子组件传值的应用实例(子父组件传值的两种触发方式)

基础的子组件和父组件通信已经搞定了,可以看此博客 父子组件传值基础应用
需求
现在需求是在一个父页面引用子组件,不只是要实现基本的父子组件传值。并且子组件给父组件传值的触发条件要在父页面触发。

目前小编采用的方式是使用ref 属性+this.emit 方法 ,在父页面调用子页面的方法结合this.emit方法实现。在父页面调用子页面的方法并且把子页面里的值通过父页面的自定义事件传递到父页面。

注意:先新建子页面,然后进行父子传值,在父页面注册子页面为组件

父->子传值

父页面

 <template><div class="hello"><ChildComponents:msg="msgc"></ChildComponents><button @click="send()">向子组件传值</button></div>
</template><script>
import ChildComponents from'./ChildComponents.vue'
export default {name: 'HelloWorld',components: {'ChildComponents':ChildComponents},data () {return {msgc:''}},methods:{send(){this.msgc='来自HelloWorld父组件的值';}}
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {margin: 40px 0 0;
}
ul {list-style-type: none;padding: 0;
}
li {display: inline-block;margin: 0 10px;
}
a {color: #42b983;
}
</style>

子页面

 <template><div><div><h1>子组件的值</h1></div><div>{{msg}}<br/></div></div>
</template><script>export default {name: 'test',components: {},props: {msg: String},data () {return {}} 
}
</script>
<style   scoped></style>

结果:
在这里插入图片描述

子->父传值

子页面触发

父页面

 <template><div class="hello"><ChildComponents@sendMsg="sendMsg":msg="msgc"></ChildComponents><h1>父组件的值</h1><br/>{{msgp}}<button @click="send()">向子组件传值</button></div>
</template><script>
import ChildComponents from'./ChildComponents.vue'
export default {name: 'HelloWorld',components: {'ChildComponents':ChildComponents},data () {return {msgc:'',msgp:'',}},methods:{sendMsg(data) {this.msgp=data;},send(){this.msgc='来自HelloWorld父组件的值';}}
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {margin: 40px 0 0;
}
ul {list-style-type: none;padding: 0;
}
li {display: inline-block;margin: 0 10px;
}
a {color: #42b983;
}
</style>

子页面

<template><div><div><h1>子组件的值</h1></div><div>{{msg}}<br/><button @click="sendMsg()">向父组件传值</button></div></div>
</template><script>export default {name: 'test',components: {},props: {msg: String},data () {return {}},methods: {sendMsg() {//子页面的值推送到父页面的自定义事件里this.$emit('sendMsg',"来ChildComPonens自子组件的值")}}}
</script>
<style   scoped></style>

结果:
在这里插入图片描述

父页面触发

父页面需要修改的地方

  <ChildComponents@sendMsg="sendMsg"ref="chile":msg="msgc"></ChildComponents><h1>父组件的值</h1><br/>{{msgp}}<button @click="sendParnt()">子组件向父组件传值,父组件触发</button>//增加一个方法methods:{sendParnt() {this.$refs.chile.sendmsgP()}}

子组件只需要增加一个方法 sendmsgP 父页面可以通过ref 调用

 methods: {sendMsg() {this.$emit('sendMsg',"来ChildComPonens自子组件的值")},sendmsgP(){this.sendMsg()}}

结果:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/556856.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

学习Spring Boot:(一)入门

微服务 微服务其实是服务化思路的一种最佳实践方向&#xff0c;遵循SOA&#xff08;面向服务的架构&#xff09;的思路&#xff0c;各个企业在服务化治理上面的道路已经走得很远了&#xff0c;整个软件交付链上各个环节的基础设施逐渐成熟了&#xff0c;微服务就诞生了。 微服务…

学习Spring Boot:(二)启动原理

前言 主要了解前面的程序入口 SpringBootApplication 这个注解的结构。 正文 参考《SpringBoot揭秘 快速构建微服务体系》第三章的学习&#xff0c;总结下。 SpringBootApplication背后的秘密 Target(ElementType.TYPE) Retention(RetentionPolicy.RUNTIME) Documented In…

学习Spring Boot:(四)应用日志

前言 应用日志是一个系统非常重要的一部分&#xff0c;后来不管是开发还是线上&#xff0c;日志都起到至关重要的作用。这次使用的是 Logback 日志框架。 正文 Spring Boot在所有内部日志中使用Commons Logging&#xff0c;但是默认配置也提供了对常用日志的支持&#xff0c…

学习Spring Boot:(五)使用 devtools热部署

前言 spring-boot-devtools 是一个为开发者服务的一个模块&#xff0c;其中最重要的功能就是自动应用代码更改到最新的App上面去。原理是在发现代码有更改之后&#xff0c;重新启动应用&#xff0c;但是比速度比手动停止后再启动还要更快&#xff0c;更快指的不是节省出来的手工…

学习Spring Boot:(六) 集成Swagger2

前言 Swagger是用来描述和文档化RESTful API的一个项目。Swagger Spec是一套规范&#xff0c;定义了该如何去描述一个RESTful API。类似的项目还有RAML、API Blueprint。 根据Swagger Spec来描述RESTful API的文件称之为Swagger specification file&#xff0c;它使用JSON来表…

java的队列实现方法_Java实现队列的三种方法集合

数组实现队列//数组实现队列class queue{int[] a new int[5];int i 0;//入队操作public void in(int m) {a[i] m;}// 出队列操作 取出最前面的值 通过循环遍历把所有的数据向前一位public int out() {int index 0;int temp a[0];for(int j 0;j < i;j) {a[j] a[j 1];…

php 简转繁体,php如何实现简体繁体转换

思路&#xff1a;根据中文简体、繁体对应的数据表&#xff0c;将其整理成一个以简体字为键&#xff0c;繁体字为值的一个一维数组&#xff0c;类似下面这样的一个数组结构&#xff1a;$dataarray(侧>側,厂>廠);在线学习视频分享&#xff1a;php视频教程好了&#xff0c;根…

学习Spring Boot:(八)Mybatis使用分页插件PageHelper

首先Mybqtis可以通过SQL 的方式实现分页很简单&#xff0c;只要在查询SQL 后面加上limit #{currIndex} , #{pageSize}就可以了。 本文主要介绍使用拦截器的方式实现分页。 实现原理 拦截器实现了拦截所有查询需要分页的方法&#xff0c;并且利用获取到的分页相关参数统一在s…

学习Spring Boot:(九)统一异常处理

前言 开发的时候&#xff0c;每个controller的接口都需要进行捕捉异常的处理&#xff0c;以前有的是用切面做的&#xff0c;但是SpringMVC中就自带了ControllerAdvice &#xff0c;用来定义统一异常处理类&#xff0c;在 SpringBoot 中额外增加了 RestControllerAdvice。 使用…

php7 ast,PHP7 的抽象语法树(AST)带来的变化

什么是抽象语法树&#xff1f;抽象语法树(abstract syntax tree&#xff0c;AST)是源代码的抽象语法结构的树状表示&#xff0c;树上的每个节点都表示源代码中的一种结构&#xff0c;这所以说是抽象的&#xff0c;是因为抽象语法树并不会表示出真实语法出现的每一个细节&#x…

学习Spring Boot:(十)使用hibernate validation完成数据后端校验

前言 后台数据的校验也是开发中比较注重的一点&#xff0c;用来校验数据的正确性&#xff0c;以免一些非法的数据破坏系统&#xff0c;或者进入数据库&#xff0c;造成数据污染&#xff0c;由于数据检验可能应用到很多层面&#xff0c;所以系统对数据校验要求比较严格且追求可…

php 仿高德,仿高德路线规划滑动效果

因为项目有个界面要模仿高德地图路径规划滑动效果&#xff0c;因此写了demo&#xff0c;并简单说下分析过程。高德地图效果演示:仿高德路线规划滑动.gifdemo效果演示:高德地图规划滑动.gif一. 分析首先&#xff0c;我们可以看出这个滚动的视图应该是UIScrollView或者UIScrollVi…

学习Spring Boot:(十八)Spring Boot 中session共享

前言 前面我们将 Redis 集成到工程中来了&#xff0c;现在需要用它来做点实事了。这次为了解决分布式系统中的 session 共享的问题&#xff0c;将 session 托管到 Redis。 正文 引入依赖 除了上篇文章中引入 spring-boot-starter-data-redis&#xff0c;还需要 spring-sess…

学习Spring Boot:(十九)Shiro 中使用缓存

前言 在 shiro 中每次去拦截请求进行权限认证的时候&#xff0c;都会去数据库查询该用户的所有权限信息&#xff0c; 这个时候就是有一个问题了&#xff0c;因为用户的权限信息在短时间内是不可变的&#xff0c;每次查询出来的数据其实都是重复数据&#xff0c;没必要每次都去…

学习Spring Boot:(二十五)使用 Redis 实现数据缓存

前言 由于 Ehcache 存在于单个 java 程序的进程中&#xff0c;无法满足多个程序分布式的情况&#xff0c;需要将多个服务器的缓存集中起来进行管理&#xff0c;需要一个缓存的寄存器&#xff0c;这里使用的是 Redis。 正文 当应用程序要去缓存中读取数据&#xff0c;但是缓存…

学习Spring Boot:(二十七)Spring Boot 2.0 中使用 Actuator

前言 主要是完成微服务的监控&#xff0c;完成监控治理。可以查看微服务间的数据处理和调用&#xff0c;当它们之间出现了异常&#xff0c;就可以快速定位到出现问题的地方。 springboot - version: 2.0 正文 依赖 maven 项目 在 pom.xml 文件中加入 actuator 的依赖&…

php实现注销功能,laravel 实现用户登录注销并限制功能

在项目根目录输入&#xff1a; php artisan make:controller Admin/LoginControllerphp artisan make:model Model/Admin -m运行之后 项目中会新增两个PHP文件新创建了admins用户表&#xff0c;此用户表默认新建中只有主键&#xff0c;创建时间&#xff0c;编辑时间。我们接下来…

将ipynb文件转为py的简单方法(图文并茂)

打开可以使用jupyter命令的命令窗口&#xff08;如果没有jupyter则需要先安装jupyter&#xff09;&#xff0c;cd 命令进入到 ipynb 文件所在的文件夹&#xff0c;执行 jupyter nbconvert --to script xxx.ipynb 即可完成 ipynb 文件到 py 文件的转化&#xff0c;执行 jupyter …

学习Spring Boot:(二十八)Spring Security 权限认证

前言 主要实现 Spring Security 的安全认证&#xff0c;结合 RESTful API 的风格&#xff0c;使用无状态的环境。 主要实现是通过请求的 URL &#xff0c;通过过滤器来做不同的授权策略操作&#xff0c;为该请求提供某个认证的方法&#xff0c;然后进行认证&#xff0c;授权成…

Linux 目录所属组设置,Linux系统用户与组管理命令及配置文件总结

一、Linux系统用户及组分类1、用户类别Linux系统中的用户大致可分为三类&#xff1a;root用户、系统用户、普通用户。每一个用户都拥有一个唯一的身份标识UID。2、组分类与用户信息对应的&#xff0c;Linux系统中的组也可分为三类&#xff1a;root组、系统组、普通组。每一个组…