父傳子  props

<template>
  <div>Home
    <button @click="getHomeData()">Home請求資料</button>
    <ul>
      <li v-for="(item,key) in list" :key=key>
        {{item.title}}
      </li>
    </ul>
    <!-- 給子元件傳值繫結title屬性 -->
    <v-header :title='title'></v-header>
    <v-life v-if="flag"></v-life>
    <button @click="flag=!flag">掛載和解除安裝元件</button>
  </div>
</template>
<script>
import Header from './Header.vue'
import Life from './Life.vue'
import Axios from 'axios'
export default {
  data () {
    return {
      msg: 'home',
      flag: true,
      list: [],
      title: '父元件要傳給子元件的值'
    }
  },
  components: {
    'v-header': Header,
    'v-life': Life
  },
  methods: {
    getHomeData () {
      // 請求資料
      var api = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1'
      Axios.get(api).then((response) => {
        this.list = response.data.result
      }).catch((error) => {
        console.log(error)
      })
    }
  }
}
</script>
<style lang="css" scope>
</style>
 

<template>
  <div>
    <h2>頭部元件--{{msg}}--{{title}}</h2>
  </div>
</template>
<script>
export default {
  data () {
    return {
      msg: '子元件自身屬性'
    }
  },
  methods: {

  },
  // 接受父元件傳過來的值
  props: ['title']
}
</script>
<style>
</style>