4.组件间数据交互

目录

4.1 父组件向子组件传值

        1.组件内部通过props接收传递过来的值

        2.父组件通过属性将值传递给子组件

         3.props 属性名规则 

        4.props属性值类型

4.2 子组件向父组件传值

4.3 非父子组件间传值

4.4 组件插槽

4.5 具名插槽

4.6 作用域插槽

---

4.1 父组件向子组件传值

        1.组件内部通过props接收传递过来的值

        2.父组件通过属性将值传递给子组件

1.组件内部通过props接收传递过来的值
        Vue.component('menu-item', {
            props: ['title'],
            template: '

{{title}}

'
        })
    2.父组件通过属性将值传递给子组件
        
        

	
		
		
	
	
		

			
{{pmsg}}
			
			
		
	
	
	
	

         3.props 属性名规则 

父组件向子组件传值
    3.props 属性名规则
        1.在props中使用驼峰形式，模板中需要使用短横线的形式（html页面标签）
        Vue.component('menu-item', {
            props: ['xyzTitle'],
            template: '

{{xyzTitle}}

'
        })
        
        2.字符串形式的模板中没有这个限制
        Vue.component('menu-item', {
            props: ['xyzTitle'],
            template: '

{{xyzTitle}}

'
        });

	
		
		
	
	
		

			
{{pmsg}}
			
		
	
	
	
	

        4.props属性值类型

        4.1父组件向子组件传值
        4.props属性值类型
            1. 字符串String
                
            2. 数值Number （要加： v-bind绑定，否则是字符串）
                
            3. 布尔值Boolean （要加： v-bind绑定，否则是字符串）
                
            4. 数组Array
                data:{
                     parr: ['apple', 'orange', 'banana']
                },
                
            5. 对象Object
                data:{
                     pobj: {
                         name: 'lili',
                         age: 12,
                         gender: 'male'
                     }
                },
                

	
		
		
	
	
		

			
{{pmsg}}
			
				
			
		
	
	
	
	

4.2 子组件向父组件传值

基本用法:
        props传递数据原则：单向数据流；
        1.子组件通过自定义事件向父组件传递信息
            扩大字体
            
        2.父组件监听子组件的事件
            
        
        3.子组件通过自定义事件向父组件传递信息 5就是传递的参数
            扩大字体
            
        4.父组件监听子组件的事件 $event参数接受固定写法
            

	
		
		
	
	
		

			
{{pmsg}}
			
		
	
	
	
	

4.3 非父子组件间传值

         1.单独的事件中心管理组件间的通信
            var hub = new Vue();
        2.监听事件与销毁事件
            监听：eventHub.$on('add-todo', addTodo); 
            销毁：eventHub.$off('add-todo'); 
        3.触发事件
            event.$emit('add-todo', 参数1)

	
		
		
	
	
		

			

				销毁tom
			
			
			
		
	
	
	
	

4.4 组件插槽

组件插槽的作用
        1.父组件向子组件传递内容
        
    组件插槽基本用法
        1.插槽位置
            Vue.component('alert-box', {
                template: `
                    

                        ERROR:
                        默认内容
                    

                `,
                                                
            });
        2.插槽内容
             无内容为插槽的默认内容
            有bug发生
            有2个bug发生

 

	
		
		
	
	
		

			
			有bug发生
			有2个bug发生
			
		
	
	
	
	

4.5 具名插槽

具名插槽
        1.插槽定义
            Vue.component('base-layout', {
                template: `
                    

                        

                            
                        

                        

                            
                        

                        

                            
                        

                    

                `,
            });
        2.插槽内容
            
                

标题信息

                

主要内容1

                

主要内容2

                

底部信息

                
            
        3.template标签用于包裹多个标签
                

 

	
		
		
	
	
		

			
				
标题信息
				
主要内容1
				
主要内容2
				
底部信息
				
			
			
			
								
				
主要内容1
				
主要内容2
				
				
				
			
		
	
	
	
	

4.6 作用域插槽

作用域插槽
        应用场景：父组件对子组件的内容进行加工处理
        1.插槽定义
            Vue.component('fruit-list', {
                props:['list'],
                template: `
                    

                
                        

                            
                                {{item.name}}
                            
                        

                    

                `,
            });        
        2.插槽内容