vue腳手架項目流程（二）父子元件傳值

1.父元件傳遞給子元件

父子元件之間的聯系就是父元件裡有子元件的容器，是以要在這個容器上下功夫

<template>
  <div class="hello">
    <h1>hello</h1>
    <router-view  :a="name" :b="msg"></router-view>
    <!-- 給這個容器，也就是子元件綁定自定義屬性，值為要傳遞的數值 -->
  </div>
</template>




<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'hello',
	  name:'hellos'
    }
  }
}
</script>
           

父元件裡傳遞要在子元件裡接收，通過屬性傳值也要通過屬性接收，也就是props

<template><!-- 元件 -->
	<div> <!-- 隻能有一個否則将會報錯 -->
		<h1>main</h1>
        <p>{{a}}->{{b}}</p>
    </div>
</template>




<script>
	export default {   //将檔案暴露出去,友善接收配置
		name:'Main',
		props:['a','b'],   //這個a,b與父元件的屬性對應
		
		
	};
</script>
           

在浏覽器裡運作就是這樣

     進入到子元件         

2.子元件傳遞給父元件

子傳父主要是利用$emit 底層  繼承EventEmitter類原型的emit方法來進行傳值的

子元件也就是那個容器标簽綁定自定義事件，子元件内部通過 $emit 進行資料推送，父元件内部通過自定義事件調用的函數

參數接收傳遞的資料。

子元件傳值

<script>
	export default {   //将檔案暴露出去,友善接收配置
		name:'Main',
		props:['a','b'],
		data(){
			return{
				child:'child'
			}
		},
		mounted(){    //挂載好之後開始傳值
			this.$emit('toparent',this.child)；//傳遞資料， 名字要與父元件自定義的事件名相同
		}
		
		
	};
</script>
           

父元件裡接收 

<p>子元件資料{{child}}</p>    
<router-view  :a="name" :b="msg" @toparent="getstate"></router-view>
<!--自定義的事件，通過傳參來接收子元件的資料-->


<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'hello',
			name:'hellos',
			child:''        //給子元件傳遞過來的資料留一個位置
    }
  },
	methods:{
		getstate(data){
				this.child = data;  //這個參數就是子元件傳遞過來的值
		}
	}

	
}
</script>


           

此時子元件還沒有挂載，是以沒有數值傳遞過來，點選點入main界面子元件開始挂載

  子元件挂載好之後，傳遞數值，父元件進行接收并展示