主要操作技能：

     1 .父组件调用子组件的时候，绑定动态属性 <v-header :title="title"></v-header>

     2.在子组件中通过props来接受父组件传的数据 

          props: ['title','msg','run','home'] 

          props: { //可以指定属性具体的数据类型哦！
            'title': String,
            'msg': Number,
            'run': Function,
            'home': Object
          } 

   3.直接在子组件中使用

编写代码：

Header.vue

<template>
	<div>
		<h2>{{xmsg}}====>{{title}}-----{{msg}}</h2>
		<button @click="run('传参数')">执行父组件的方法</button><br /><br />
		
		<button @click="getParent()">获得父组件的属性和方法</button>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				xmsg: '头部组件'
			}
		},
		methods: {
			getParent(){
//				alert(this.title);
//				alert(this.home.title);
				this.home.run('hello');
			}

		},
		props: ['title','msg','run','home']  //指定父组件中的属性
	}
</script>

App.vue

<template>
	<!--所以的内容多要被根节点包含起来 -->
	<div id="home">
		<v-header :title="title" :msg='msg' :run="run" :home="this"></v-header><br /><br /> {{msg}}
		<br />
	</div>
</template>

<script>
	/**
	 * 父组件给子组件传值
	 *   1.父组件调用子组件的时候，绑定动态属性
	 *    <v-header :title="title"></v-header>
	 * 
	 *   2.在子组件中通过props来接受父组件传的数据
	 * 
	 * 
	 */

	import Header from './Header.vue'
	export default {
		data() { //数据
			return {
				msg: '我是首页组件',
				title: '父组件参数' //父组件数据
			}
		},
		components: {
			'v-header': Header
		},
		methods: {

//			run() {
//              alert('我是父组件的run方法!');
//			}
			run(result) {
                alert('我是父组件的run方法--->'+result);
			}
		}

	}
</script>

注意： 可以指定属性的数据类型 （效果忽略）

<template>
	<div>
		<h2>{{xmsg}}====>{{title}}-----{{msg}}</h2>

		<button @click="run('aaa')">父组件方法</button>
		<button @click="getHome()">获得父组件属性</button>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				xmsg: '头部组件'
			}
		},
		methods: {
			getHome() {
				alert(this.home.title);
			}
		},
		props: { //可以指定属性具体的数据类型哦！
			'title': String,
			'msg': Number,
			'run': Function,
			'home': Object
		} //指定父组件中的属性
	}
</script>

 

效果：

父组件传值给子组件（属性）

子组件的属性名msg不能父组件的属性名msg相同哦！否则会出现异常的哦！

 

修改后，就不会发生这个异常了！

子组件执行父组件的方法

子组件执行父组件属性和方法(传对象)