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;

 

转载于:https://www.cnblogs.com/yuri2016/p/6765840.html