Vue组件是什么

分享人：胡云鹤

目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.扩展思考

6.编码实战

7.参考文献

8.更多讨论

1.背景介绍

Vue组件是什么

组件是可复用的 Vue 实例, 如果网页中的某一个部分需要在多个场景中使用，那么我们可以将其抽出为一个组件进行复用。组件大大提高了代码的复用率。

2.知识剖析

组件的组织

通常一个应用会以一棵嵌套的组件树的形式来组织

注册组件

全局注册

          
            Vue.component('demo', {
              template: '<div><h1>demo</h1></div>'
            })
          
        

记住：全局注册的行为必须在根 Vue 实例 (通过 new Vue) 创建之前发生。

局部注册

            
              var demo2 = {
                template: '>div>demo2>/div>'
              }
              new Vue({
                el: '#app',
                components: {
                  demo2
                }
              })
            
          

单页面组件

如果你使用了webpack或者使用了Vue-CLI来建立项目，那么就可以使用单页面的组件来构建你的页面

单页面组件是以.vue结尾的文件，其基本构成如下

3.常见问题

父子组件通信问题

父 → 子组件数据传递

4.解决方案

父 → 子组件数据传递

利用prop属性

            
              <template>
                  <div>
                    {{msg}}
                  </div>
                </template>

                <script>
                  export default {
                    name: 'child',
                    props: {
                      msg: {
                        type: String
                      }
                    }
                  }
                </script>

                <style lang="stylus" rel="stylesheet/stylus" scoped>

                </style><template>
                  <div>
                    {{msg}}
                  </div>
                </template>

                <script>
                  export default {
                    name: 'child',
                    props: {
                      msg: {
                        type: String
                      }
                    }
                  }
                </script>

                <style lang="stylus" rel="stylesheet/stylus" scoped>

                </style>
            
          

            
                <template>
                    <child :msg="'hello world'"></child>
                  </template>

                  <script>
                    import Child from "./child";
                    export default {
                      name: 'Module',
                      components: {Child}
                    }
                  </script>

                  <style lang="stylus" rel="stylesheet/stylus" scoped>

                  </style>
              
          

5.扩展思考

单向数据流

Prop验证

自定义事件

6.编码实战

7.参考文献

参考一 Vue官方文档

8.更多讨论

鸣谢

感谢大家观看