在父元件的引用標籤裡 加入冒號屬性

<template>
  <div>
  	<!--這裡冒號屬性就是寫入子元件數值-->
  	<v-header :title="title"></v-header>
  	<h1>新聞元件----{{msg}}</h1><br/>
	
	<button v-on:click="setMsg">看看是啥新聞</button>
  </div>
</template>
<script>
	import header from './Header.vue';
	export default{
		components:{
			'v-header':header
		},
		data(){
			return{
				msg:'預設新聞',
				title:'新聞元件傳過來的title'
			}
		},
		methods:{
			setMsg(){
				this.msg = '預設改變新聞'
			}
		}
	}
</script>
<style lang="scss" scoped="scoped">
</style>
 

再在引用的子元件里加入一個數組來接收值

<template>
  <div>
  	<h1>我是真頭部----{{title}}</h1><br/>
  	<h1>我是真頭部----{{msg}}</h1><br/>
	<button v-on:click="setMsg">頭部的抵抗</button>
  </div>
</template>
<script>
	export default{
		data(){
			return{
				msg:'頭部',
			}
		},
		methods:{
			setMsg(){
				this.msg = '我真的是真頭部'
			}
		},
		props:['title'] //這個是接收父元件傳過來的值
	}
</script>
<style lang="scss" scoped="scoped">
</style>
 

————————————————————————————————————————————————————

父元件給子元件傳方法。。。。。

父元件

<template>
  <div>
  	<!--這裡冒號屬性就是寫入子元件數值-->
  	<v-header :title="title" :run="run"></v-header>
  	<h1>新聞元件----{{msg}}</h1><br/>
	
	<button v-on:click="setMsg">看看是啥新聞</button>
  </div>
</template>
<script>
	import header from './Header.vue';
	export default{
		components:{
			'v-header':header
		},
		data(){
			return{
				msg:'預設新聞',
				title:'新聞元件傳過來的title'
			}
		},
		methods:{
			setMsg(){
				this.msg = '預設改變新聞'
			},
			run(){
				alert('我是來自父元件的run方法');
			}
		}
	}
</script>
<style lang="scss" scoped="scoped">
</style>
 

子元件

<template>
  <div>
  	<h1>我是真頭部----{{title}}</h1><br/>
  	<h1>我是真頭部----{{msg}}</h1><br/>
	<button v-on:click="setMsg">頭部的抵抗</button>
	<button v-on:click="run()">新聞父元件的抵抗</button>
  </div>
</template>
<script>
	export default{
		data(){
			return{
				msg:'頭部',
			}
		},
		methods:{
			setMsg(){
				this.msg = '我真的是真頭部'
			}
		},
		props:['title','run'] //這個是接收父元件傳過來的值
	}
</script>
<style lang="scss" scoped="scoped">
</style>

——————————————————————————————————————————————————————

還特麼可以整個元件傳過去。。。。傳入父元件

<template>
  <div>
  	<!--這裡冒號屬性就是寫入子元件數值-->
  	<v-header :title="title" :run="run" :newzujian="this"></v-header>
  	<h1>新聞元件----{{msg}}</h1><br/>
	
	<button v-on:click="setMsg">看看是啥新聞</button>
  </div>
</template>
<script>
	import header from './Header.vue';
	export default{
		components:{
			'v-header':header
		},
		data(){
			return{
				msg:'預設新聞',
				title:'新聞元件傳過來的title'
			}
		},
		methods:{
			setMsg(){
				this.msg = '預設改變新聞'
			},
			run(){
				alert('我是來自父元件的run方法');
			}
		}
	}
</script>
<style lang="scss" scoped="scoped">
</style>

然後子元件點取值，也可以取父元件方法

<template>
  <div>
  	<h1>我是真頭部----{{title}}</h1><br/>
  	<h1>我是真頭部----{{msg}}</h1><br/>
	<button v-on:click="setMsg">頭部的抵抗</button>
	<button v-on:click="run()">新聞父元件的抵抗</button>
	<h2>{{newzujian.msg}}</h2>
  </div>
</template>
<script>
	export default{
		data(){
			return{
				msg:'頭部',
			}
		},
		methods:{
			setMsg(){
				this.msg = '我真的是真頭部'
			}
		},
		props:['title','run','newzujian'] //這個是接收父元件傳過來的值
	}
</script>
<style lang="scss" scoped="scoped">
</style>

——————————————————————————————————————————————————————

props還可以去驗證父元件傳過來資料的合法性

https://cn.vuejs.org/v2/guide/components-props.html

———————————————————————————————————————————————————————

父元件主動獲取子元件的數值方法

<template>
  <div>
  	<!--1.這裡給引用的子元件定義一個ref-->
  	<v-header ref='header'></v-header>
  	<h1>新聞元件----{{msg}}</h1><br/>
	
	<button v-on:click="setMsg()">看看是啥新聞</button>
	<button v-on:click="getChild()">獲得引用子元件的資料和方法</button>
  </div>
</template>
<script>
	import header from './Header.vue';
	export default{
		components:{
			'v-header':header
		},
		data(){
			return{
				msg:'預設新聞',
				title:'新聞元件傳過來的title'
			}
		},
		methods:{
			setMsg(){
				this.msg = '預設改變新聞'
			},
			run(){
				alert('我是來自父元件的run方法');
			},
			getChild(){
				//2.然後用this.$refs.定義名稱獲取
				var cmsg = this.$refs.header.msg;
				
				alert(cmsg);
				
				this.$refs.header.run();
			}
		}
	}
</script>
<style lang="scss" scoped="scoped">
</style>

————————————————————————————————————————————————————

子元件主動獲取父元件的數值與方法

<template>
  <div>
  	<h1>我是真頭部----{{msg}}</h1><br/>
	<button v-on:click="setMsg()">頭部的抵抗</button>
  </div>
</template>
<script>
	export default{
		data(){
			return{
				msg:'頭部',
			}
		},
		methods:{
			setMsg(){
				this.msg = '我真的是真頭部';
				//這裡是定義主動獲取父元件的數值與方法	
				alert(this.$parent.msg);
				//方法就直接呼叫方法即可
			},
			run(){
				alert('我是子元件的run方法');
				
			}
		},
	}
</script>
<style lang="scss" scoped="scoped">
</style>

————————————————————————————————————————————————————

非父子元件傳值

首先先建立個js

 然後裡面的內容，只需要建立一個vue例項並暴露出來即可

import Vue from 'vue';

var VueEvent = new Vue()

export default VueEvent;

然後再在News元件中定義一個方法

<template>
  <div>
  	<!--1.這裡給引用的子元件定義一個ref-->
  	<h1>新聞元件----{{msg}}</h1><br/>
	
	<button v-on:click="setMsg()">看看是啥新聞</button>
	<button v-on:click="passMsg()">給兄弟元件Header傳遞</button>
  </div>
</template>
<script>
	//引入VueEvent
	import VueEvent from '../model/VueEvent.js';
	export default{
		components:{
		},
		data(){
			return{
				msg:'預設新聞',
				title:'新聞元件傳過來的title'
			}
		},
		methods:{
			setMsg(){
				this.msg = '預設改變新聞'
			},
			passMsg(){
				//傳遞的資料的固定格式
				VueEvent.$emit('to-header',this.msg);
			}
		}
	}
</script>
<style lang="scss" scoped="scoped">
</style>

然後讓header 初始化就載入方法監聽方法，個人理解就是個訊息佇列

<template>
  <div>
  	<h1>我是真頭部----{{msg}}</h1><br/>
	<button v-on:click="setMsg()">頭部的抵抗</button>
	<button v-on:click="getNewsPass()">獲取News的傳值</button>
  </div>
</template>
<script>
	import VueEvent from '../model/VueEvent.js';
	export default{
		data(){
			return{
				msg:'頭部',
			}
		},
		methods:{
		  setMsg(){
	      this.msg = '我真的是真頭部';
		  },
		},
		mounted(){
			
			VueEvent.$on('to-header',function(data){
				alert(data);
			})
		}
	}
</script>
<style lang="scss" scoped="scoped">
</style>