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界面子组件开始挂载

  子组件挂载好之后，传递数值，父组件进行接收并展示