vue学习（三）：父组件向子组件传参

既然是组件化开发，当然少不了数据传递，我们先看看官网上写的。

使用props传递参数，试一下，还是用我们之前的项目结构

一、静态传递

1.main_header.vue

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

<script>
	export default {
	  name: 'main_header',
	  props: ['msg'] // 声明传递过来的数据msg
	}
</script>

<style>
</style>

2.App.vue

<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>

2.App.vue

<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>

到这里  vue的父组件向子组件传参就结束了