vue组件中props与data的结合使用方式

export default {
  props: {
    id: { default: 0 }
  },
  data () {
    return {
      myId: this.id //用props的id初始化
    }
  },
  methods: {
    pop (id) { // 供外部调用
      this.myId = id
      alert(this.id)
      alert(this.myId)
    }
  }
}

<template>
  <div>
      <!-- 将变量id的值赋给组件的id属性，一锤子买卖 -->
    <Pop ref="popWin" :id="id" />
  </div>
</template>
<script>
import Pop from './_pop.vue'
export default {
  components: {
    Pop
  },
  data () {
    return {
      id: 0
    }
  },
  methods: {
    showDetail (id) {//页面的id也是由外部传进来的，事先不可能知道
      this.id = id //保存了id，但影响不了组件Pop
      this.$refs.popWin.pop(id) // 调用Pop组件的方法,并传递id
    }
  }
}
</script>

<template>
   <div><Report ref="report1" :id="myId"/></div>
</template>
<script>
import Report from './_report.vue'
export default {
  components: {
    Report
  },
  data () {
    return {
      myId: 0,
    }
  },
  methods: {
    init (id) {
      this.myId = id //改变id值
    }
  }
}
</script>

<template>
    <div>我是子组件，名曰谢康乐，一箭射双鹤</div>
</template>
<script>
export default{
  watch: {
    id (val) {
      alert('id变了，我是不是应该做点什么？')
    }
  }
}
</script>

// 父组件
<template>
  <div class="parent">
    <chart :info='info'/>
  </div>
</template>

// 子组件
<template>
  <div class="child">
    <ul>
      <!-- 此处 info 来自 props -->
      <li v-for="i in info" :key='i'>{{i}}</li>
    </ul>
  </div>
</template>
<script>
export default {
  props:['info'],
  data () {},
}
</script>

// 子组件
<template>
  <div class="child">
    <ul>
      <!-- 此处 list 来自 data -->
      <li v-for="i in list" :key='i'>{{i}}</li>
    </ul>
  </div>
</template>
<script>
export default {
  props:['info'],
  data () {
    return {
      list:[],
    }
  },
  mounted(){
    this.list = this.info.map(i => '0_'+i)
  },
}
</script>

// 子组件
<template>
  <div class="child">
    <ul>
      <!-- 此处list 来自 data -->
      <li v-for="i in list" :key='i'>{{i}}</li>
    </ul>
  </div>
</template>
<script>
export default {
  props:['info'],
  data () {
    return {
      list:[],
    }
  },
  mounted(){
    // this.list = this.info.map(i => '0_'+i)
  },
  watch: {
    info() {
      this.list = this.info.map(i => '0_'+i)
    }
  }
}
</script>

// 子组件
<template>
  <div class="child">
    <ul>
      <!-- 此处comp 来自 computed -->
      <li v-for="i in comp" :key='i'>{{i}}</li>
    </ul>
  </div>
</template>
<script>
export default {
  props:['info'],
  computed: {
    comp (){
      return this.info.map(i => '0_'+i)
    }
  },
}
</script>