Vue组件

Vue组件，扩展html，封装可重用的代码
组件命名方式有两种
（1）短横线分隔命名，如 'b-box'
（2）PascalCase首字母大写命名即大驼峰,但是当使用 PascalCase 定义组件时，在html文档里引用时必须使用kebab-case短横线分隔命名才生效，否则报错，如'TableBox'要写成'table-box'
原因：因为HTML对大小写不敏感，JS对大小写敏感
组件里的data属性必须是一个函数
1.局部组件
在Vue实例中，创建一个components对象，里面定义组件名称，一些数据方法等，先定义一个组件名称，template里写的是可重用的HTML模板，props里定义的是一些静态属性

components: {
                'b-box': {
                    template: `
                        {{title}}
                        {{content}}
                               `,
                    props: ['title', 'content']
                }
            }

当要使用这个模板时，标签就是要使用的组件名，在Vue实例中，挂载对象，定义相关的数据，然后组件就可绑定这些数据，渲染页面

注意：局部组件只能在当前Vue实例作用域下有效
2.全局组件
全局组件必须写在Vue实例创建之前，才在该根元素下面生效；

  Vue.component:(
                'b-count', {
                    template: `
               {{types}}
               
                
                
                
               
              `,
})

组件间的数据传递
子组件通过$emit可以触发事件，第一个参数为要触发的事件，第二个事件为要传递的数据
在组件中来监听MyCount值的变化

watch: {
                        MyCount(val) {
                            console.log(val);
                            this.$emit('synccount', val)
                        }
                    }

在Vue实例中接收MyCount值的变化

methods: {
                synccount(index, e) {                    
                    this.list[index].count = e
                }
            }

在模板中点击触发事件

3.父子组件
$parent是获取父组件对象

$root是获取根组件对象

$children是获取子组件对象

$ref返回的是一个对象，对象中包含所有带有ref属性的组件
父组件

ue.component('b-tabs', {
            template:`
                
                    
                        {{item}}
                    
                    
                        
                    
                
            `,
            data() {
                return {
                    //高亮索引
                    activeIndex:0,
                    //定义titles数组
                    titles:[]
                }
            },
            watch:{
                //监听高亮索引
                activeIndex(val){
                    //先隐藏所有的子组件
                    this.$children.forEach(c=>c.isShow=false)
                    //再显示当前高度的子组件
                    this.$children[val].isShow = true
                }
            },
            // 父组件挂载完成时，所有的子组件一定全部都挂载完成了
            mounted() {
                this.$children[this.activeIndex].isShow = true
            },
        })

子组件

      Vue.component('b-tabs-item', {
            props:['title'],
            template:`
                
                    
                
            `,
            data() {
                return {
                    //是否显示
                    isShow:false
                }
            },
            created() {
                // 在子组件的created生命周期函数中，可以获取到父组件的数据
                this.$parent.titles.push(this.title)
            },
        })

模板运用

运行截图

运行效果

插槽问题
用来表示，相当于一个占位符，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充内容会替换子组件的标签。如果子组件没有使用插槽，父组件如果需要往子组件中填充模板或者html, 是没法做到的。
4.第三方组件库
如element-ui,vant,iview等，在需要使用的页面中引入其样式及文件，就可以使用了，简单又高效

Vue组件

{{title}}

你可能感兴趣的:(Vue组件)