前端-Vue基础3（父子组件交互）
1、子组件往父组件传值
点击子组件的值，子组件自增，父组件的值也跟着自增
通过：this.$emit('change')方法向父组件暴露事件，在子组件中引用，可以调用父组件的方法
点击子组件触发click事件，调用子组件的add方法
子组件的add方法触发了父组件的事件，调用了父组件的changeAdd方法
<body>
<div id="app">
<!-- 调用父组件的方法-->
<number @change="countAdd"></number>
<number @change="countAdd"></number>
<div>父组件--<span>{{count}}</span></div> </div>
<script src="js/vue.js"></script>
<script>
Vue.component('number',{
template:'<div>子组件--<span @click="add">{{num}}</span></div>',
data:function () {
return{
num:0
}
},
methods:{
add:function () {
this.num++
this.$emit('change'.this.num)//向父组件触发事件
}
}
}) new Vue({
el:'#app',
data:{
count:0
},
methods:{
countAdd:function (num) {
this.count++
console.log(num)
}
}
})
</script>
</body>
2、父组件向子组件单向传值
父组件向子组件传值，存在单向数据流
父组件可以随意向子组件传值，但是子组件不能随意修改父组件的值，因为子组件修改了父组件的值，其他同级的子组件的值也会跟着改变
<body>
<div id="app">
<!-- 调用父组件的方法-->
<number :num2="number2" num3="10"></number>
<number :num2="number2" num3="10"></number> </div>
<script src="js/vue.js"></script>
<script>
Vue.component('number',{
//父组件向子组件传值，存在单向数据流
//父组件向子组件可以随意传值
//但是子组件不能随意修改父组件的值，因为子组件修改了父组件的值，其他同级的子组件的值也会跟着改变
props:['num2','num3'],
template:'<div>子组件--<span @click="change">{{count}}</span></div>',
data:function () {
return{
count:this.num2
}
},
methods:{
change:function () {
this.count = 100
}
}
}) new Vue({
el:'#app',
data:{
number2:99
}
})
</script>
</body>
2.1 props
props可以是数组
Vue.component('number',{
//父组件向子组件传值，存在单向数据流
//父组件向子组件可以随意传值
//但是子组件不能随意修改父组件的值，因为子组件修改了父组件的值，其他同级的子组件的值也会跟着改变
props:[num2,num3],
template:'<div>子组件--<span @click="change">{{count}}</span></div>',
data:function () {
return{
count:this.num2
}
},
methods:{
change:function () {
this.count = 100
}
}
})
也可以是字典
Vue.component('number',{
//父组件向子组件传值，存在单向数据流
//父组件向子组件可以随意传值
//但是子组件不能随意修改父组件的值，因为子组件修改了父组件的值，其他同级的子组件的值也会跟着改变
props:{
'num2':{
type:[Number,String],//数据类型
default:200,//默认值
required:true//不能和default连用
}
},
template:'<div>子组件--<span @click="change">{{count}}</span></div>',
data:function () {
return{
count:this.num2
}
},
methods:{
change:function () {
this.count = 100
}
}
})
前端-Vue基础3（父子组件交互）的更多相关文章
- Vue基础：子组件抽取与父子组件通信
在工作中承担一部分前端工作,主要使用Vue + Element UI. 随着版本迭代,需求增加,页面往往变得更加臃肿,不易维护.学习子组件的封装和抽取,能更好适应需求. 为什么需要子组件 可复用 将重 ...
- 【Vue】利用父子组件间通信实现一个场景
组件间通信是组件开发的,我们既希望组件的独立性,数据能互不干扰,又不可避免组件间会有联系和交互. 在vue中,父子组件的关系可以总结为props down,events up: 在vue2.0中废弃了 ...
- [前端] VUE基础 (6) (v-router插件、获取原生DOM)
一.v-router插件 1.v-router插件介绍 v-router是vue的一个核心插件,vue+vue-router主要用来做SPA(单页面应用)的. 什么是SPA:就是在一个页面中,有多个页 ...
- 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据
前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向 ...
- vue中的父子组件相互调用
vue中的父子组件相互调用: 1.vue子组件调用父组件方法:子组件:this.$emit('xx'); 父组件:定义yy方法,并在引用子组件时传参,如@xx="yy" 2.vue ...
- Vue – 基础学习(2):组件间 通信及参数传递
Vue – 基础学习(2):组件间 通信及参数传递
- 前端Vue基础学习
Vue基础 对与vue的简洁明了的干货分享,适合小白学习观看,如果有笔误或者想了解更多的,请给笔者留言,后续会继续分享,从零开始的vue相关经验 1.创建vue实例 <div id=" ...
- [前端] VUE基础 (9) (element-ui、axios、Vuex)
一.element-ui的使用 官方网页:https://element.eleme.cn/#/zh-CN 1.安装element-ui (venv) D:\pycharm_workspace\vue ...
- vue.js $refs和$emit 父子组件交互
父调子 $refs (把父组件的数据传给子组件) <template> <div id="app"> <input type="butto ...
随机推荐
- sql 数据库使用注意事项
1.在对数据库表进行操作时,一定要注意当前操作的是哪一个数据库,否则很容易引起不必要的错误.对于master数据库中的数据文件,尽量不要去对其操作. 2.可通过图形方式对数据库进行备份操作,可通过数据 ...
- Redis系列（一）：安装
本系列介绍Redis,从安装到使用,太简单的使用不介绍了,介绍一些比较有意思的功能,也会介绍一些原理性的东西.本篇先介绍Redis的单实例安装.Redis还可以做到高可用,通过哨兵和集群可以做到高可用 ...
- 聊一聊.NET Core结合Nacos实现配置加解密
背景 当我们把应用的配置都放到配置中心后,很多人会想到这样一个问题,配置里面有敏感的信息要怎么处理呢? 信息既然敏感的话,那么加个密就好了嘛,相信大部分人的第一感觉都是这个,确实这个是最简单也是最合适 ...
- WizTree——一个扫描快似Everything的硬盘空间分析工具
虽然我平时用的主要是Linux,但是由于实际环境是win10,对于磁盘资源的控制,我主要是通过Windows自带的文件资源管理器来查看的,但是显然这个工具不够直观.于是,我也被安利过SpaceSnif ...
- 【NX二次开发】获取视图当前的剪辑边界UF_VIEW_ask_current_xy_clip()
UF_VIEW_ask_current_xy_clip()这个函数网上还没有详细的说明,我花了一点时间,详细得理解了一下函数返回的4个值的意思,作为一个猜想,希望有人能验证一下. 获取视图当前的剪辑边 ...
- 【VBA】读取配置文件存入字典型变量中
配置文件: 源码: Dim Co As Object '设为全局变量 Function 读取cfg() As Boolean Dim strcfg As String strcfg = " ...
- 【ElasticSearch】给ElasticSearch数据库配置慢查询日志
给ElasticSearch引擎配置慢查询日志,可以实时监控搜索过慢的日志.虽然ElasticSearch以快速搜索而出名,但随着数据量的进一步增大或是服务器的一些性能问题,会有可能出现慢查询的情况. ...
- 如何让vscode C++ 终端不再显示调试启动信息
按照微软的官方文档(https://go.microsoft.com/fwlink/?LinkID=533484#vscode)配置好C++环境之后. 每次按F5都会在终端输出,但是会附加一串信息.例 ...
- 必看！LuatOS自定义C库全新教程，一文极速上手
今天继续讲LuatOS的开发,上一期简单说了一下如何移植LuatOS,相信很多朋友已经看过了.那么今天,我就开始讲C和Lua调用的部分教程. LuatOS相关资料及Lua语言的官方定义,详见以下链接: ...
- Air722UG_模块硬件设计手册_V1.1
下载PDF版本: Air722UG_模块硬件设计手册_V1.1.pdf @ 目录 1. 绪论 2.综述 2.1 型号信息 2.2 主要性能 2.3 功能框图 3.应用接口 3.1 管脚描述 3.2 工 ...