vue使用props动态传值给子组件里的函数用,每次更新,呼叫函数
父组件
<template>
<div id="app"> <div>详情内容</div>
<button v-on:click="startCount">开始</button> <Info :startCountsub="startCountState" /> </div>
</template> <script>
import bus from '../../bus/bus.js';
import 'common/css/reset.css';
import Hello from 'components/Hello/Hello'
import Info from 'components/info'
export default {
name: 'app',
data () {
return {
startCountState:false
}
}, methods:{
startCount:function(){ this.startCountState=true;
console.log('this.startCountState:' + this.startCountState);
console.log("开始倒计时");
// bus.$emit("countDown"); 不使用bus
}
},
components: {
Hello,Info
}
}
</script> 子组件: <template>
<div class="info">
<h1>{{ msg }}</h1> <img src="../module/detail/images/test.jpg" style="width:200px"> <h2><span>{{timeout}}</span>秒倒计时,父亲传过来的值:{{startCountState}}||{{startCountsub}}</h2>
<button v-on:click="startCount">开始</button>
</div>
</template> <script>
import bus from '../bus/bus.js';
export default {
name: 'info',
props: ["startCountsub"],
data () {
return {
msg: 'Welcome to Your Vue.js App info',
timeout:60,
// startCountState: this.$parent.startCountState, //startCountsub
startCountState: this.startCountsub //就初始化的时候更新一次,但在模板里会动态更新
}
},
computed: { },
created(){
// this.countDown();
console.log(this.$parent);
bus.$on("countDown",()=>{
//this.startCountState=true
//this.countDown();
this.startCount();
}); let intval2=setInterval(()=>{
console.log('儿子:this.startCountState:' + this.startCountState);
if(this.$parent.startCountState){
this.startCountState=true; this.countDown();
clearInterval(intval2);
} },1000); },
watch: {
startCountState:'countDown'
},
methods:{
countDown:function(){
//console.log('哈this.startCountsub:' + this.startCountsub); if(this.startCountState){
let intval=setInterval(()=>{ this.timeout--;
this.timeout==0 && clearInterval(intval);
},1000);
} },
startCount:function(){ this.startCountState=true;
} } }
</script> bus import Vue from 'vue'
var bus=new Vue(); /*
bus.$on("haha1",(text)=>{
alert(text);
});
bus.$on("haha2",(text)=>{
alert('haha2:'+text);
})
*/ export default bus;
vue使用props动态传值给子组件里的函数用,每次更新,呼叫函数的更多相关文章
- vue 父组件动态传值至子组件
1.进行数据监听,数据每次变化就初始化一次子组件,进行调取达到传递动态数据的目的普通的监听: watch:{ data: function(newValue,oldValue){ doSomeThin ...
- vue点击父组件里面的列表动态传值到子组件
<template> <div> 爸爸 <div style="background-color:yellow;margin-top:10px" v- ...
- iview 父组件动态传值给子组件
父组件 <maintenance-super :show="{'modalSuper':modalSuper,'myData':myData}" @on-close=&quo ...
- vue中父组件使用props或者$attras向子组件中传值
知识点:vue中使用props或者$attras向子组件中传值 (1) props传值 子组件必须注册好要传的数据() props:['id'] (2)$attrs传值 该数据在props中,没有注册 ...
- vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值。
vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值. vue 父组件与子组件相互通信 一.父组件给子组件传值 props 实现父组件向子组件传值. 1父组件里: ...
- 【转】Vue组件一-父组件传值给子组件
Vue组件一-父组件传值给子组件 开始 Vue组件是学习Vue框架最比较难的部分,而这部分难点我认为可以分为三个部分学习,即 组件的传值 - 父组件向子组件中传值 事件回馈 - 子组件向父组件发送消息 ...
- vue 组件-父组件传值给子组件
父组件通过属性,传值给子组件,子组件通过,props数组里的名称来接受父组件传过来的值. HTML部分: <div id="app"> <tmp1 :parent ...
- 40.VUE学习之--组件之间的数据传参父组件向子组件里传参,props的使用实例操作
父组件向子组件里传参,props的使用实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...
- 九、React中的组件、父子组件、React props父组件给子组件传值、子组件给父组件传值、父组件中通过refs获取子组件属性和方法
一.概述 React中的组件: 解决html 标签构建应用的不足. 使用组件的好处:把公共的功能单独抽离成一个文件作为一个组件,哪里里使用哪里引入. [父子组件]:组件的相互调用中,我们把调用者称为父 ...
随机推荐
- Android Studio 生成APK出现的「前言不允许有内容」错误
Build-Generate Signed APK的时候发现提示「前言不允许有内容」.发现提示的是Android.mk.xxxjni.c存在问题. 解决方法是,把/main/res中的,包括/jni目 ...
- Win32环境下代码注入与API钩子的实现
本文详细的介绍了在Visual Studio(以下简称VS)下实现API钩子的编程方法,阅读本文需要基础:有操作系统的基本知识(进程管理,内存管理),会在VS下编写和调试Win32应用程序和动态链接库 ...
- CF 757E Bash Plays with Functions——积性函数+dp+质因数分解
题目:http://codeforces.com/contest/757/problem/E f0[n]=2^m,其中m是n的质因子个数(种类数).大概是一种质因数只能放在 d 或 n/d 两者之一. ...
- Code-NFine:NFine权限控制
ylbtech-Code-NFine:NFine权限控制 1.返回顶部 1. NFine框架研究 1.前台业务操作 1.1 系统菜单配置方法 1.2 菜单管理配置方法 1.2.1 按钮管理 1.2.2 ...
- 设计模式学习笔记 1.factory 模式
Factory 模式 用户不关心工厂的具体类型,只知道这是一个工厂就行. 通过工厂的实现推迟到子类里面去来确定工厂的具体类型. 工厂的具体类型来确定生产的具体产品. 同时用户不关心这是一个什么样子的产 ...
- 20个jQuery分页插件和教程
1.客户端的jQuery 分页插件jPages jPages 是一个客户端的分页插件,但提供很多特性例如自动翻页.键盘和滚动浏览,延迟显示以及完全可定制的导航面板. Read More Demo 2. ...
- CNN相关资料
转子http://blog.csdn.net/qianqing13579/article/details/71076261 前言 入职之后,逐渐转到深度学习方向.很早就打算写深度学习相关博客了,但是由 ...
- 【网络爬虫】【python】网络爬虫(二):网易微博爬虫软件开发实例(附软件源码)
对于urllib2的学习,这里先推荐一个教程<IronPython In Action>,上面有很多简明例子,并且也有很详尽的原理解释:http://www.voidspace.org.u ...
- Flutter实战视频-移动电商-09.首页_项目结构建立和获取数据
09.首页_项目结构建立和获取数据 在config下创建service_url.dart 用来配置我们后端接口的配置文件 一个变量存 接口地址,一个接口方法地址 所有后天请求数据的方法都放在这个文件夹 ...
- Number()、parseInt()、parseFloat()的区别:
Number().parseInt().parseFloat()的区别: Number()的强制类型转换与parseInt()和parseFloat()方法的处理方式相似,只是它转换的是整个值,而不是 ...