父组件
<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动态传值给子组件里的函数用,每次更新,呼叫函数的更多相关文章

  1. vue 父组件动态传值至子组件

    1.进行数据监听,数据每次变化就初始化一次子组件,进行调取达到传递动态数据的目的普通的监听: watch:{ data: function(newValue,oldValue){ doSomeThin ...

  2. vue点击父组件里面的列表动态传值到子组件

    <template> <div> 爸爸 <div style="background-color:yellow;margin-top:10px" v- ...

  3. iview 父组件动态传值给子组件

    父组件 <maintenance-super :show="{'modalSuper':modalSuper,'myData':myData}" @on-close=&quo ...

  4. vue中父组件使用props或者$attras向子组件中传值

    知识点:vue中使用props或者$attras向子组件中传值 (1) props传值 子组件必须注册好要传的数据() props:['id'] (2)$attrs传值 该数据在props中,没有注册 ...

  5. vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值。

    vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值. vue 父组件与子组件相互通信 一.父组件给子组件传值 props 实现父组件向子组件传值. 1父组件里: ...

  6. 【转】Vue组件一-父组件传值给子组件

    Vue组件一-父组件传值给子组件 开始 Vue组件是学习Vue框架最比较难的部分,而这部分难点我认为可以分为三个部分学习,即 组件的传值 - 父组件向子组件中传值 事件回馈 - 子组件向父组件发送消息 ...

  7. vue 组件-父组件传值给子组件

    父组件通过属性,传值给子组件,子组件通过,props数组里的名称来接受父组件传过来的值. HTML部分: <div id="app"> <tmp1 :parent ...

  8. 40.VUE学习之--组件之间的数据传参父组件向子组件里传参,props的使用实例操作

    父组件向子组件里传参,props的使用实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...

  9. 九、React中的组件、父子组件、React props父组件给子组件传值、子组件给父组件传值、父组件中通过refs获取子组件属性和方法

    一.概述 React中的组件: 解决html 标签构建应用的不足. 使用组件的好处:把公共的功能单独抽离成一个文件作为一个组件,哪里里使用哪里引入. [父子组件]:组件的相互调用中,我们把调用者称为父 ...

随机推荐

  1. 「网络流24题」「LuoguP3358」 最长k可重区间集问题(费用流

    题目描述 对于给定的开区间集合 I 和正整数 k,计算开区间集合 I 的最长 k可重区间集的长度. 输入输出格式 输入格式: 的第 1 行有 2 个正整数 n和 k,分别表示开区间的个数和开区间的可重 ...

  2. Tomcat 安装之后,双击Tomcat.exe,无法运行成功,怎么办?

    Log形式多种多样,有的时候跟下面一样: 首先的解决方案就是:修改server.xml中所有的端口,因为不只8080端口可能被占用! 我在出问题的时候就修改8080端口.结果死活运行不了,纠结一些时间 ...

  3. H264解码器源码(Android 1.6 版)

    H264解码器源码,移植ffmpeg中的H264解码部分到Android,深度删减优化,在模拟器(320x480)中验证通过. 程序的采用jni架构.界面部分,文件读取,视频显示都是用java做的,底 ...

  4. HDU1711(KMP入门题)

    Number Sequence Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  5. 杂项:UI

    ylbtech-杂项:UI 1.返回顶部 1. UI即User Interface(用户界面)的简称.泛指用户的操作界面,包含移动APP,网页,智能穿戴设备等.UI设计主要指界面的样式,美观程度.而使 ...

  6. C++学习笔记1-使用数组进行vector初始化

    另外,如果是定义的时候,可以直接指定复制.比如:int s[5]={1,2,3,4,5};vector<int> v(s,s+5);就可以啦.

  7. Codeforces1111D Destroy the Colony 退背包+组合数

    Codeforces1111D 退背包+组合数 D. Destroy the Colony Description: There is a colony of villains with severa ...

  8. gSoap传输二进制数据

    最近使用gSoap传输二进制数据,遇到问题.gSoap不能一次传输二进制数据.所以使用分包传送. struct xsd_DwgInfo { ];//分包大小 int m_nReadSize;// bo ...

  9. laravel 路由设置

    目录  routes\web.php 初始路由,直接渲染视图welcome,即V层   '/'为路径:www.xxx.com/ Route::get('/', function () { return ...

  10. Forward Rendering 正向渲染

    Forward Rendering 正向渲染        正向渲染一个基于着色器的渲染路径.它支持逐像素计算光照(包括法线贴图和灯光Cookies)和来自一个平行光的实时阴影.在默认设置中,少数最亮 ...