持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第3天，点击查看活动详情

前言

今天继续整理VUE组件知识点，冲冲冲！！！

一.父子组件传值

父子组件传值大体流程

1.通过prop往子组件通信

• 父>子
  • 1.先给父组件中绑定自定义的属性
  • 2.在子组件中使用props接受父组件传递的数据
  • 3.可以在子组件中任意使用

  Vue.component('Chlid',{
			 	template:`
			 	<div> 
			 	 <p>我是一个子组件{{chlidDate}}</p>
				 <input type="text" v-model='chlidDate'/>
			 	</div>
			 	`,
				props:['chlidDate']
			 }); 
			Vue.component('Parent',{
				data(){
					return{
						msg:"我是父组件的数据"
					}
				},
				template:`
				<div> 
				 <p>我是一个父组件</p>
				 <Chlid :chlidDate ='msg' />
				</div>
				`
			});

- 子→ 父

• 1.在父组件绑定 自定义的事件
• 2.在子组件中触发原生的事件 在函数中使用$emit触发自定义的chlidHandler

 // 1. parent 2.Child
			 Vue.component('Chind',{
				 template:`
				 <div> 
				  <p>我是子组件</p>
				  <input style='text' v-model='chlidData'  @input='changeValue(chlidData)'/>
				 </div>	 
				 `	,
				  props:['chlidData'],
				  methods:{	
					  changeValue(val){
						  //$emit(自定义的事件名,消息)
						  this.$emit('childHandler',val)
					  }
				  }
			 })
		    Vue.component('Parent',{
				data(){
					return{
						msg:'我是父组件的数据'	
					}
				},
				template:`
				<div>
				<p>我是父组件</p>
				<Chind :chlidData = 'msg'  @childHandler ='childHandler'/>
				</div>
				`,
				methods:{
					childHandler(val){
						console.log(val);
					}
				}
			});

二.具名插槽

• 插槽 内置组件 slot 做为承载分发内容的出口
• 进行封装组件

<div id="app"></div>
		<script type="text/javascript">
			Vue.component('myLi',{
				template:`
				 <li>
				   预留的第一个坑
				   <slot name='two'></slot>
				   预留的第二个坑
				   <slot name='three'></slot>
				 </li>
				`
			});
			var App={
				template:`
				<div>
				 <ul>
				  <myLi>
				  <h2 slot='two'>我是第一个坑</h2>
				  <h3 slot='three'>我是第二个坑</h3>
				  </myLi>
				 </ul>
				</div>
				
				`
			};
			
			new Vue({
				el:'#app',
				components:{
					App,
				},
				template:`<App/>`
			})

结尾

在这里整理了 关于组件 父子之间互相传值的方法以及传值过程的流程。能够清楚父子之间的传值，主要运用到props传值方面，在组件之间互相传值的方法还有很多种，在以后我会逐步整理出来，一起学习喜喜。 在这里还有提到具名插槽，运用可以减少代码臃肿的问题，可以让代码简洁一些。