vue之组件与通信

• 组件化开发基础
  • 组件是什么？有什么用
  • 注意事项
• 组件注册方式
  • 局部组件
  • 全局组件
• 组件通信之父传子(自定义属性)
• 组件通信之子传父(自定义事件)
• ref属性实现双向通信
• 动态组件和keep-alive
• 插槽
  • 基本使用
  • 插槽应用场景1
  • 插槽应用场景2
  • 具名插槽

组件化开发基础

组件是什么？有什么用

扩展 HTML 元素，封装可重用的代码，目的是复用
	-例如：有一个轮播，可以在很多页面中使用，一个轮播有js，css，html
	-组件把js，css，html放到一起，有逻辑，有样式，有html

注意事项

1 自定义组件需要有一个root element，一般包裹在一个div中
2 父子组件的data是无法共享
3 组件可以有data，methods,computed....,但是data 必须是一个函数

组件注册方式

1 全局组件
	Vue.component('组件名', {
                template:`html代码`,
        	   // 这里的data必须是方法所以要加() 在return里写变量
                data(){
                    return {
                        变量:值
                    }
                },
                methods:{
					方法(){}
                    }
                }
            },)
2 局部组件  在Vue对象内  和el、data、methods同级写components
	components:{
            '组件名':{
                template:`html代码`,
                data(){
                    return {
                        变量:值
                    }
                },
                methods:{
                    方法(){}
                    }
                }
            },
        }

局部组件

    
    
    



      // 在这里调用局部组件
    























    

全局组件

    
    
    



       // 在这里调用全局组件

组件通信之父传子(自定义属性)

通过自定义属性实现

步骤：

1.给组件自定义属性绑定一个父中定义的变量eg:

2.在定义组件内写props属性，对应一个数组，数组内包含组件自定义属性名eg: props:['fathername',]

3.这样组件(子)就可以使用Vue对象(父)内的变量啦，实现了通信.

    
    
    




	// 给组件自定义属性绑定一个父中的变量
    
    

    {{headName}}
    

    

组件通信之子传父(自定义事件)

通过自定义事件实现

步骤：

1.给组件绑定自定义事件对应一个函数eg:

2.在另一个标签上绑定事件通过this.$emit('自定义事件名', 要传递的参数...)来触发其对应函数的执行

3.这样就在Vue对象中获得了组件传来的参数

    
    
    




    
    

    接收到的参数:{{revText}}

ref属性实现双向通信

ref放在标签上，拿到的是标签对象，可以点属性拿到对应的值
ref放在组件上，拿到的是组件对象，可以点属性拿到对应的值
通过这种方式实现子传父（this.$refs.mychild.text）
通过这种方式实现父传子（调用子组件方法传参数）

    
    
    




    
    点我
    

动态组件和keep-alive

keep-alive：组件不销毁(页面切换之前输入的数据会保留)

component：有个is属性，指定显示的组件是哪个

    
    
    




    

        
首页
        
订单
        
商品
    
    
        
    

插槽

插槽就是可以在组件标签中间插入标签或内容，比如我自定义一个index标签，那么直接写是不行的，需要在定义index标签的时候加slot标签就行了

基本使用

    
    
    



    
    aaa

插槽应用场景1

    
    
    




    
        
{{data}}
    

       
           
    

插槽应用场景2

    
    
    



    
     点我显示隐藏

    

具名插槽

具名插槽的意思就是给插槽起名字，然后使用的时候把指定的标签或内容插到指定的插槽中，这样可以指定不同的插槽使用不同的内容

    
    
    





    
我来替换插槽a
    
我来替换插槽b