既然是元件化開發，當然少不了資料傳遞，我們先看看官網上寫的。

使用props傳遞引數，試一下，還是用我們之前的專案結構

一、靜態傳遞

1.main_header.vue

<template>
	<div>{{msg}}</div> <!--顯示msg-->
</template>

<script>
	export default {
	  name: 'main_header',
	  props: ['msg'] // 宣告傳遞過來的資料msg
	}
</script>

<style>
</style>
 

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <mainHeader msg="hello word"></mainHeader> <!--傳遞引數到子元件，這裡名字如果是普通字串模板，要和子元件中props中的名字一樣，如果是像 my-msg這樣中間有橫槓的，那麼props中要寫成駝峰方式myMsg-->
    <router-view/>
  </div>
</template>

<script>
import mainHead from './components/header/main_header'
export default {
  name: 'app',
  components: {
    mainHeader: mainHead
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
 

1.main_header.vue

<template>
	<div>{{count}}</div> <!--這裡我們傳入count 這個count動態變化-->
</template>

<script>
	export default {
	  name: 'main_header',
	  props: ['count'] //宣告count
	}
</script>

<style>
</style>

2.App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <mainHeader :count="count"></mainHeader> <!--使用英文 : 動態繫結count引數-->
    <router-view/>
  </div>
</template>

<script>
import mainHead from './components/header/main_header'
export default {
  name: 'app',
  data: function(){ // 這裡我們用data定義count資料，初始化為0
  	return {
  		count: 0
  	}
  },
  components: {
    mainHeader: mainHead
  },
  methods: {
  	addCount: function() { // 每秒讓count自增1
  		let _this = this;
  		setInterval(function(){_this.count++},1000);
  	}
  },
  mounted: function() { // 載入頁面時候自動呼叫addCount方法
  	this.$nextTick(function() {
  		this.addCount();
  	})
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
 

三、傳入陣列

1.main_header.vue

<template>
	<div> <!--這個div最好加上，因為我做的時候沒有這個div他總是報錯-->
		<div>{{count}}</div>
		<div v-for="(item, index) in list">{{item}}</div> <!--這裡用v-for迴圈傳過來的list-->
	</div>
</template>

<script>
	export default {
	  name: 'main_header',
	  props: ['count','list'] //指定傳過來的引數
	}
</script>

<style>
</style>

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <mainHeader :count="count" :list="list"></mainHeader> <!--這裡我們把list傳過去-->
    <router-view/>
  </div>
</template>

<script>
import mainHead from './components/header/main_header'
var data = { //我們在外面定義這個list
	list: ['java','html','css','js']
}
export default {
  name: 'app',
  data: function(){
  	return {
  		count: 0,
  		list: data.list // 在vue中宣告list
  	}
  },
  components: {
    mainHeader: mainHead
  },
  methods: {
  	addCount: function() {
  		let _this = this;
  		setInterval(function(){_this.count++},1000);
  	}
  },
  mounted: function() {
  	this.$nextTick(function() {
  		this.addCount();
  	})
  }
}
</script>