11 Vue父组件给子组件传值、传方法

步骤

1.父组件调用子组件的时候，绑定动态属性

<v-header :title="title"></v-header>

2.在子组件里面通过props接收父组件传过来的数据

props:['title']

	props:{
		'title':String
	}

3.直接在子组件中使用

父组件传值给子组件的实例

分别有App.vue,Home.vue,以及Header.vue这3个组件，Home组件挂载在App.vue组件中·，Header组件挂载在Home组件中。
App.vue:

<template>
	<div id="app">
		<!-- 使用组件 -->
		<v-home></v-home>
	</div>
</template>

<script>
	// 导入组件
	import Home from "./components/Home.vue";
	export default {
		name: 'app',
		data() {
			return {
				msg: 'Welcome to Your Vue.js App'
			}
		},
		// 注册组件
		components: {
			'v-home': Home
		}
	}
</script>

<style>
</style>

Home.vue:

<template>
	<div id="home">
		<!-- 使用组件 -->
		<v-header :title="title"></v-header>
	</div>
</template>

<script>
	
	//引用 Header 组件
	import Header from "./Header.vue";
	export default {
		name: 'home',
		data() {
			return {
				title: '首页'
			}
		},
		//注册组件
		components: {
			'v-header': Header
		}
	}
</script>

<style>
</style>

Header.vue:

<template>
	<div id="top-header">
		{{title}}
	</div>
</template>

<script>
	export default {
		name: 'top-header',
		props:['title']
	}
</script>	

<style>
</style>

运行结果如图：

Vue父组件给子组件传方法、传整个实例

其中方法传值，整个父组件传值也是同样的道理， 先父组件调用子组件，绑定动态属性，最后再在子组件里面通过props接收父组件传过来的数据，进行使用。