前端-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 ...
随机推荐
- 07.ElementUI 2.X 源码学习:源码剖析之工程化(二)
0x.00 前言 项目工程化系列文章链接如下,推荐按照顺序阅读文章 . 1️⃣ 源码剖析之工程化(一):项目概览.package.json.npm script 2️⃣ 源码剖析之工程化(二):项目构 ...
- 改造 Firefox 浏览器——GitHub 热点速览
作者:HelloGitHub-小鱼干 上周推荐了一个可以在浏览器上用 VS Code 的项目,这次 Firefox-UI-Fix 带你给 Firefox 来个大变身,在它现有 Proton UI 下进 ...
- 目标检测数据集The Object Detection Dataset
目标检测数据集The Object Detection Dataset 在目标检测领域,没有像MNIST或Fashion MNIST这样的小数据集.为了快速测试模型,我们将组装一个小数据集.首先,我们 ...
- mybatis学习——properties属性实现引用配置文件
Mybatis核心配置文件中有很多的配置项,配置文档的顶层结构如下: *注意:配置项的顺序不能颠倒,如果颠倒了它们的顺序,在MyBatis的自启动阶段会发生异常,导致程序无法运行. propertie ...
- 实验1、初入Flask
实验介绍 1. 实验内容 Flask是一个用Python编写的Web应用程序框架.Armin Ronacher带领一个名为Pocco的国际Python爱好者团队开发了Flask.Flask基于Werk ...
- 【NX二次开发】NX内部函数，libufunx.dll文件中的内部函数
本文分为两部分:"带参数的函数"和 "带修饰的函数". 浏览这篇博客前请先阅读: [NX二次开发]NX内部函数,查找内部函数的方法 带参数的函数: void e ...
- mapboxgl 互联网地图纠偏插件（一）
之前写过一个 leaflet 互联网地图纠偏插件,引用插件后一行代码都不用写,就能解决国内互联网地图瓦片的偏移问题. 最近想对 mapboxgl 也写一个这样的插件. 原因是自己发布的OSM矢量瓦片地 ...
- oracle中job无法正常运行，如何排查
1.生产环境Oracle中的job无法正常运行 select * from dba_jobs_running;(查看正在运行的job) 2.select * from dba_jobs(查看job历史 ...
- Oracle冷备
概念:一致性的备份,也就是在数据库一致性关闭后做的备份,一般用:shutdown immediate方式关闭. 步骤:1.查看三大核心文件所在位置:数据文件,控制文件,日志文件 数据文件:select ...
- canvas小画板——（3）笔锋效果
画线准备 准备一个canvas <canvas id="canvasId" width="1000" height="800"> ...