Vue-组件

组件

　　组件是可复用的 Vue 实例,主要用于开发中具有相同特征不同数据的模块把它集成为一个组件供重复利用

1.全局组件:

　　组件的属性不能用大写字母组件的名字可以用驼峰命名法,但是使用的时候必须用连字符全局注册的组件使用时不能使用单标签(不会报错,但是只能使用一次多次使用只显示第一个)

　　注册的组件不要跟系统标签同名

2.局部组件

　　一个vm实例可以有多个局部组件,但是只能供当前vm实例使用

组件引用的三种方式

new Vue({
                el: '#app',
                data: {},
                methods: {},
                components:{
                    Box:{
                        template:`<div>
                                  <h1>6666</h1>
                                   <p>hello</p>
                                   </div>`
                    },
                    Nav1:{
                        template:`<div>
                                  <div>按钮1</div>
                                  <div>按钮2</div>                                  
                                  <div>按钮3</div>
                                  <div>按钮4</div>
                                   </div>`
                    },
                    MyBox:{
                        template:`<h1>666</h1>`
                    }   
                },
                                 
                filters:{},
                watch:{},
                computed:{},
                directives:{},              
                beforeCreate(){},
                created(){},
                beforeMount(){},
                mounted(){},
                beforeUpdate(){},
                updated(){},
                beforeDestroy(){},
                destroyed(){}
            })

<script>
            let a1 = {
                template: `<div>
                                  <h1>6666</h1>
                                   <p>hello</p>
                                   </div>`
            }
            let a2 = {
                template: `<div>
                                  <div>按钮1</div>
                                  <div>按钮2</div>                                  
                                  <div>按钮3</div>
                                  <div>按钮4</div>
                                   </div>`
            }
            let a3 = {
                template: `<h1>666</h1>`
            }
            var vm = new Vue({
                el: '#app',
                data: {},
                methods: {},
                components: {
                    //注册组件
                    Box: a1,
                    Nav1: a2,
                    MyBox: a3
                },
 
                filters: {},
                watch: {},
                computed: {},
                directives: {},
                beforeCreate() {},
                created() {},
                beforeMount() {},
                mounted() {},
                beforeUpdate() {},
                updated() {},
                beforeDestroy() {},
                destroyed() {}
            })
        </script>

<script type="module">        
           //1.导入
            import Box from "./componnets/Box.js"
            import Nav1 from "./componnets/Nav1.js"
            import MyBox from "./componnets/MyBox.js"
            var vm = new Vue({
                el: '#app',
                data: {},
                methods: {},
                components: {
                    //2.注册组件
                    Box,
                    Nav1,
                    MyBox,
                    Box2:{
                        template:`<div>
                               <h1>666-box2</h1>
                               <p @click="fn">{{msg}}</p>
                         </div>`,
                        data:function(){
                            return {msg:"msg66666"}
                        },
                        methods:{
                            fn(){console.log("Box2组件的方法")}
                        },
                        filters: {},
                        watch: {},
                        computed: {},
                        directives: {},
                        beforeCreate() {},
                        created() {},
                        beforeMount() {},
                        mounted() {},
                        beforeUpdate() {},
                        updated() {},
                        beforeDestroy() {},
                        destroyed() {}
                    }
                },
                filters: {},
                watch: {},
                computed: {},
                directives: {},
                beforeCreate() {},
                created() {},
                beforeMount() {},
                mounted() {},
                beforeUpdate() {},
                updated() {},
                beforeDestroy() {},
                destroyed() {}
            })
        </script>