Vue组件

一：组件化开发基础

1.组件是什么？有什么用？

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

组件的分类：

• 全局组件：可以放在根中
• 局部组件：

工程化开发之后：

1个组件 就是1个xx.vue

二：组件的注册方式

1. 定义全局组件，绑定事件，编写样式

    
    
    


    

    
我是根部组件
    
    

        

            
        
    

    

3. 定义局部组件

① 局部组件 放在 Vue实例(根组件) 中

② 局部组件 放在 全局组件 中

注意点：

• 定义的组件（body中的位置）必须要放在Vue实例（这也是一个组件 根组件）中
• 局部组件 必须放在 全局组件/根组件 中，无法单独使用
• 定义的组件必须在Vue实例的上方

二：组件编写方式 与 Vue实例的区别

Vue实例（其实，它也是1个组件，是1个根组件）

    
    
    




    

        
字符串：{{name}}
        
数值：{{age}}
        
Click Here
    

组件

区别：

1.自定义组件需要有1个 root element，一般包裹在 1个div中

2.父子组件的data是无法共享的

• 这一点就像Docker的容器一样，是相互隔离的
• 就算父子的data中数据相同，拥有相同的方法，也是互不影响的

3.组件可以有data、methods、computed....，但是 data 必须是一个函数

Vue实例：data是1个键值对，用来存放属性的

var vm = new Vue({
    el: '#box',
    data: {
        isShow: true
    }
})

组件：data是1个函数，需要有返回值(return)

Vue.component('global', {
    template: `
        

            
我是头部组件
            
显示消失
        
`,
    methods: {
        handleClick() {
            console.log('我被点击了')
            this.isShow = !this.isShow
        }
    },
    data() {
        return {
            isShow: true
        }
    }
})

三：组件通信

1.父传子

• 在全局组件中自定义属性：
• 在组件中获取：{{myname}}

属性验证

• 限制父传子的变量类型

props: {
    myname: String,
    isshow: Boolean
}

• 父传子时候注意以下区别

• 实例

2.子传父（通过事件）

3.子传父（控制子组件的显示和隐藏）

点击子组件，就会触发父组件的某个函数执行

小案例

• 子组件有1个按钮 和 1个输入框，子组件输入完内容后，数据在父组件中展示

    
    
    




    
    

    
父组件接收到的数据：{{name}}