zoukankan      html  css  js  c++  java
  • 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="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;
  • 相关阅读:
    Spring3整合Quartz实现定时作业
    伪静态URLRewrite学习笔记
    VC 获取系统特殊文件夹的路径如:系统目录,桌面等
    正反向代理
    过虚拟机检测
    PDB符号文件信息
    Win64 驱动内核编程-33.枚举与删除对象回调
    Windows 反调试技术——OpenProcess 权限过滤
    Win10如何开启蓝屏记录?Win10开启蓝屏信息记录的方法
    Win7 x64下进程保护与文件保护(ObRegisterCallbacks)
  • 原文地址:https://www.cnblogs.com/yuri2016/p/6765840.html
Copyright © 2011-2022 走看看