Vue基础 · 父子组件之间的交互（5）
1、父子组件交互
<body>
<div id="app"> <!--子组件接收到”change"方法，绑定父组件的方法-->
<number @change="countAdd"></number>
<number @change="countAdd">></number>
<div>父组件：<sapn>{{count}}</sapn></div> </div> <script src="../js/vue.js"></script> <script>
Vue.component('number',{
template:'<div>子组件：<span @click="add">{{count}}</span>\</div>',
data:function () {
return{
count:0
}
},
methods:{
add:function () {
this.count++
//向外触发一个事件，是“change"事件
this.$emit('change')
}
}
}) new Vue({
el:'#app',
data:{
//父组件使用的count
count:0
},
methods: {
countAdd:function () {
this.count++
}
}
}) </script>
</body>
2、子组件像父组件传递数据，通过$emit触发事件的方式传递
<div id="app">
<!--子组件接收到”change"方法，绑定父组件的方法-->
<number @change="countAdd"></number>
<number @change="countAdd">></number>
<div>父组件：<sapn>{{count}}</sapn></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++
//向外触发一个事件，是“change"事件
//还可传递值：this.num
this.$emit('change',this.num)
}
}
})
new Vue({
el:'#app',
data:{
//父组件使用的count
count:0
},
methods: {
//num:接收到全局组件中this.$emit（this.num）
countAdd:function (num) {
//拿到返的值进行相加
this.count += num
}
}
})
</script>
3、父组件向子组件传递值
<body>
<div id="app">
<number num2="9" num3="10"></number>
</div>
<script src="../js/vue.js"></script>
<script>
Vue.component('number',{
// 父组件向子组件传递值，存在单向数据流
props:['num2','num3'],
template:'<div>子组件：<span>{{num2}}--{{num3}}</span></div>',
data:function () {
return{
}
}
})
new Vue({
el:'#app',
data:{
//父组件使用的count
count:0
}
})
</script>
</body>
使用v-bing方法绑定引用后再进行传递
<body>
<div id="app">
<number :num2="number2" num3="10"></number>
</div>
<script src="../js/vue.js"></script>
<script>
Vue.component('number',{
// 父组件向子组件传递值，存在单向数据流
props:['num2','num3'],
template:'<div>子组件：<span>{{num2}}</span></div>',
data:function () {
return{
}
}
})
new Vue({
el:'#app',
data:{
number2:99
}
})
</script>
父组件向子组件传值，存在单向数据流
父组件可以随意向子组件传值，但是子组件不能随意修改父组件的值，因为子组件修改了父组件的值，其他同级的子组件的值也会跟着改变
<body>
<div id="app">
<number :num2="number2"></number>
<number :num2="number2"></number>
</div>
<script src="../js/vue.js"></script>
<script>
Vue.component('number', {
// 父组件向子组件传递值，存在单向数据流
props: ['num2'],
template: '<div>子组件：<span @click="add">{{num2}}</span></div>',
data: function () {
return {
}
},
methods: {
add:function () {
this.num2++
}
}
})
new Vue({
el: '#app',
data: {
number2: 99
},
})
</script>
</body>
如何解决上边的问题：
- 把数据进行分离
<body>
<div id="app">
<number :num2="number2"></number>
<number :num2="number2"></number>
</div>
<script src="../js/vue.js"></script>
<script>
Vue.component('number', {
// 父组件向子组件传递值，存在单向数据流
// props：数据想要修改，在data中进行修改
props: ['num2'],
template: '<div>子组件：<span @click="add">{{count}}</span></div>',
data: function () {
return {
count:this.num2
}
},
methods: {
add:function () {
this.count++
}
}
})
new Vue({
el: '#app',
data: {
number2: 99
},
})
</script>
</body>
4、全局组件中的props的字典格式使用
<body>
<div id="app">
<number></number>
</div>
<script src="../js/vue.js"></script>
<script>
Vue.component('number', {
// 父组件向子组件传递值，存在单向数据流
props: {
'num2':{
// 默认值200
default:'200',
// 定义传过来的类型，支持一次定义多种类型，
// 如：定义为Number，传过来必须是数值类型，要不就会报错，只是在console中报错，不影响正常使用
type:[Number,String],
//是否必传,布尔类型：true、false
require:true
}
},
template: '<div>子组件：<span @click="add">{{count}}</span></div>',
data: function () {
return {
count:this.num2
}
},
methods: {
add:function () {
this.count++
}
}
})
new Vue({
el: '#app',
data: {
number2: 99
},
})
</script>
</body>
Vue基础 · 父子组件之间的交互（5）的更多相关文章
- vue 中父子组件之间的交互
1,最直接的也是最简单的方法是利用props来数据传值. 子组件定义如下: props: { iconClass: { type: String, required: true }, classNam ...
- 【Vue课堂】Vue.js 父子组件之间通信的十种方式
这篇文章介绍了Vue.js 父子组件之间通信的十种方式,不管是初学者还是已经在用 Vue 的开发者都会有所收获.无可否认,现在无论大厂还是小厂都已经用上了 Vue.js 框架,简单易上手不说,教程详尽 ...
- Vue.js 父子组件之间通信的方式
Vue 父子组件之间的同学有一下几种方式: 1. props 2. $emit -- 组件封装用的比较多 3. .sync -- 语法糖 4. $attrs 和 $listeners -- 组件封装用 ...
- vue中父子组件之间的传值、非父子组件之间的传值
在Vue实例中每个组件之间都是相互独立的,都有自己的作用域,所以组件之间是不能直接获取数据.在项目开发中一个组件可能需要获取另一个组件的值,我们可以通过其他方法间接的获取.所以,获取的方法有以下几种: ...
- vue之父子组件之间的通信方式
(一)props与$emit <!-这部分是一个关于父子组件之间参数传递的例子--> <!--父组件传递参数到子组件是props,子组件传递参数到父组件是用事件触发$emit--&g ...
- Vue中独立组件之间数据交互
独立组件之间数据交互:通过自定义事件 组件A中的[数据],传递给组件B 1.创建组件A,组件B 2.组件B在实例创建完成时就开始监听事件[等待接收数据]:钩子 3.组件A中触发事件,发送数据 注意:接 ...
- vue 非父子组件之间的传值（Bus/总线/发布订阅模式/观察者模式）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- vue非父子组件之间的通信
https://www.cnblogs.com/chengduxiaoc/p/7099552.html //vm.$emit( event, arg ) //触发当前实例上的事件 //vm.$on ...
- 「Vue」父子组件之间的传值及调用方法
a.父组件向子组件传值data(){},props数据区别data中的数据可读可写,是自己的数据props是个数组,中的数据是父组件传递过来的,只读不能写<login :dmsg='msg'&g ...
- Vue非父子组件之间的传值
1.新建一个js文件 然后引入vue 实例化vue 最后暴露这个实例:实例化Vue对象的时候名称要小写,大写控制台报错,我也不知道什么原因: 2.在要广播的地方引入刚才定义的实例: 3通过VueEm ...
随机推荐
- 一文搞定Spring Task
今天和大家分享下Spring Task这个知识点,主要通过下面6个点来展开描述,希望能够帮助到大家. 1.什么是定时任务 2.入门案例 3.Corn表达式 4.Corn实战案例 5.@Schedule ...
- Java long类型转换易犯的错误
记一个刷题过程中遇到的溢出问题. 在做这道题的时候遇到一个与 long 类型有关的溢出错误. 原始代码如下 class Solution { public int numberOfPairs(int[ ...
- （15）go-micro微服务main.go开发
目录 一 导包 二 配置中心 三 注册中心 四 zap日志初始化 五 初始化Mysql数据库 六 初始化Redis连接 七 注册服务 八 初始化服务 九 注册 handle 十 启动服务 十一 mai ...
- ant design pro 配置路由 显示页面步骤详解
第一步 在 src/views 下新建页面的vue文件,如果相关页面有多个,可以新建一个文件夹来放置相关文件. 给页面里写几个字,等会可以看到哦~~ 第二步 将文件加入菜单和路由 进入这个文件 ...
- SpringBoot项目动态定时任务之 ScheduledTaskRegistrar（解决方案一）
前言 在做SpringBoot项目的过程中,有时客户会提出按照指定时间执行一次业务的需求. 如果客户需要改动业务的执行时间,即动态地调整定时任务的执行时间,那么可以采用SpringBoot自带 ...
- 重学c#系列—— IO流[三十四]
前言 简单介绍一下io流. 以前写过两篇,里面是java 语言写的,简单介绍了一下io流,这里是对io流的整理. https://www.cnblogs.com/aoximin/p/12007925. ...
- k210 cpu、asm、rust、smpboot、ipi
介绍 k210的datasheet主要讲了与外设相关的内容,k210并不支持最新的完整的riscv指令集,而是实现了一部分.本文想要通过汇编来一点点摸索k210的寄存器,布局,mmu,缓存等结构 相关 ...
- 3分钟教你安装 Dropzone4 文件拖拽增强工具 中文破解版 亲测有效
Dropzone下载 下载直通车:立即下载 安装教程 打开我给你提供的Dropzone4 安装包 鼠标选中第一个程序拖到第二个程序里 在启动台打开 会出现下面情况 不要慌 点击好 去访达找到对应的软 ...
- ‘mongo‘不是内部或外部命令，也不是可运行的程序或批处理文件
出现问题原因: MongoDB环境变量未配置 解决办法: 1)右击我的电脑-->属性,进入系统属性界面,点击如下图所示位置的[高级系统设置],在弹窗的[系统属性]的[高级]选项卡右下角点击[环境 ...
- JZOJ 3992.Christmas
题目大意 给定一个数列,支持区间加一个数和区间取 \(max\),询问单点询问数值和它被更改的次数 思路 模板的吉司机线段树 维护区间最小值和严格次小值以及最小值的个数 针对询问维护区间和以及区间修改 ...