vue组件简介

最新推荐文章于 2024-05-11 17:03:33 发布

ㄗòs╃牸架

最新推荐文章于 2024-05-11 17:03:33 发布

阅读量699

点赞数

分类专栏： vue html javascript

本文链接：https://blog.csdn.net/Drunk_Invader/article/details/124015954

版权

javascript 前端 vue.js

javascript 同时被 3 个专栏收录

28 篇文章 0 订阅

订阅专栏

html

27 篇文章 0 订阅

订阅专栏

vue

5 篇文章 0 订阅

订阅专栏

一、组件的基概念

组件就是把页面分成一块块的去实现(针对大型项目开发比较适用) 也可以把页面中一些共有的模块提炼出来
书写占位符占位符的名字自己定义，一般需要符合语义不能和标签名字一样，容易有歧义。占位符最终被组件替代
template类似于之前的el 绑定标签 template只能有一个根标签
组件中的数据需要书写成函数的形式

    <body>
        <div id="app">
            <v-header></v-header>
            <v-footer></v-footer>
            <v-con></v-con>
        </div>
        <script src="js/vue.js"></script>
        <script>
            var header={
                template:'<header><h1>{{msg}}</h1><p>这是详细内容</p></header>',
                data(){
                    return {
                        msg:'这是头部'
                    }
                }
            }
            var footer={
                template:'<p>这是底部的内容</p>'
            }
            new Vue({
                el:'#app',
                // 挂载组件
                components:{
                    // k:v k代表的是占位符 v组件名字
                    'v-header':header,
                    'v-footer':footer,
                    'v-con':{
                        //挂载的时候定义组件
                        template:'<h1>这是标签</h1>'
                    }
                }
            })
        </script>
    </body>

二、组件的另一种方式

写出占位符
学出模板：即占位符所对应的html ,模板必须写在template中
注意：书写模板时其中只能拥有一种根标签

    <body>
        <div id="app">
            <!-- 占位符 -->
            <v-header></v-header>
        </div>
        <template id="header">
            <div>
                <h1>这是头部</h1>
                <p>这是头部内容</p>
            </div>
        </template>
        <script src="js/vue.js"></script>
        <script>
            // 定义组件
            var vheader={
                // template:'#对应template的id名'
                template:'#header',
            }
            new Vue({
                el:'#app',
                components:{
                    'v-header':vheader
                }
            })
        </script>
    </body>

三、solt插槽

slot是固定的写法插槽,可以进行程序的扩展，相当于丢了一个占位符在此处，后期可以渲染任何内容
最终在页面中渲染的内容由占位符中slot的值和slot标签的name值一样的表情渲染
slot的值和name值保持一致

    <body>
        <div id="app">
            <v-play>
                <p slot="play">这是娱乐</p>
            </v-play>
            <v-game>
                <p slot="play">这是游戏</p>
            </v-game>
        </div>

        <template id="header">
            <div>
                <img src="https://mat1.gtimg.com/www/mobi/2017/image/ui-icon_log.svg" alt="">
                <slot name="play"></slot>
                <p>登陆</p>
            </div>
        </template>
        <script src="js/vue.js"></script>
        <script>
            var header={
                template:'#header'
            }
            new Vue({
                el:'#app',
                data:{

                },
                components:{
                    'v-play':header,
                    'v-game':header
                }
            })
        </script>
    </body>

四、动态组件conponent

动态组件component component最终渲染成了占位符 is的值是个变量 msg是一个变量 msg的值是什么占位符就是什么

    <body>
        <div id="app">
            <button @click="msg='account'" :class="{'current':msg=='account'}">360账号登陆</button>
            <button @click="msg='message'" :class="{'current':msg=='message'}">短信登陆</button>
            <component :is="msg"></component>
        </div>
        <template id="account">
            <h1>360账号登陆</h1>
        </template>
        <template id="message">
            <h1>短信登陆</h1>
        </template>
        <script src="js/vue.js"></script>
        <script>
            new Vue({
                el:'#app',
                data:{
                    msg:'account'
                },
                components:{
                    'account':{
                        template:'#account'
                    },
                    'message':{
                        template:'#message'
                    }
                }
            })
        </script>
    </body>

五、组件的嵌套

注意：在组件的嵌套中，组件嵌套在谁上就挂载到谁身上

    <body>
        <!-- 正常情况下，组件的数据不能直接共享(通信) -->
        <div id="app">
            {{num}}
            <v-header></v-header>
            <v-con></v-con>
        </div>
        <template id="header">
            <h1>这是头部{{msg}} {{num}}</h1>
        </template>
        <template id="con">
            <main>
                <h1>这是内容</h1>
                <v-footer></v-footer>
            </main>
        </template>
        <template id="footer">
            <main >这是底部</main>
        </template>
        <script src="js/vue.js"></script>
        <script>
            var header={
                template:'#header',
                data(){
                    return {
                        msg:'这是子组件的数据'
                    }
                }
            }
            var footer={
                template:'#footer'
            }
            var con={
                template:'#con',
                // 挂载组件的时候，千万要注意，在谁身上就要挂载到哪里
                components:{
                    'v-footer':footer
                }
            }      
            new Vue({
                el:'#app',
                data:{
                    num:'这是父组件的数据'
                },
                components:{
                    'v-header':header,
                    'v-con':con
                }
            })
        </script>
    </body>

六、父组件给子组件传递参数

在占位符中 :cmsg="fmsg" cmsg子组件中需要接收到额数据(自定义) fmsg父组件的数据
在子组件中定义props属性接收传递的参数 props:['cmsg']
在子组件中可以直接使用cmsg

    <body>
        <div id="app">
            <h1 @click="change()">这是父组件{{msg}}{{a}}</h1>
            <v-header :n="msg" :b="a"></v-header>
        </div>
        </template> -->
        <template id="header">
            <main>
                <h1 @click="change()">这是子组件</h1>
                <p>{{t}}{{b}}</p>
            </main>
        </template>
        <script src="js/vue.js"></script>
        <script>
            var header={
                template:'#header',
                props:['n','b'],
                data(){
                    return{
                        num:'这是子组件的数据',
                        t:this.n,
                    }
                },
                watch:{
                    n(){
                        this.t=this.n;
                    }
                },
                methods:{
                    change(){
                        this.t+=3;
                        // 因为b是对象，所以修改数据b的时候，其实是去地址内部修改
                        this.b.user+='h'
                    }
                }
            }
            new Vue({
                el:'#app',
                data:{
                    msg:'这是父组件的数据',
                    a:{
                        user:'zsh'
                    }
                },
                components:{
                    'v-header':header
                },
                methods:{
                    change(){
                        this.msg+=1;
                        this.a.user+='c'
                    }
                }
            })
        </script>
    </body>

七、子组件给付组件传递数据

在子组件中定义一个方法，方法内部定义函数/事件 this.$emit('方法名',传递的参数,参数...)
在占位符中 @方法名(子组件定义方法)="父组件的方法"
在父组件中定义方法，接收参数
在子组件中调用触发函数的方法

    <body>
       <div id="app">
           {{msg}}
           {{t}}
           <!-- @子组件中定义的事件名字="父级定义方法,不加括号" -->
           <v-header @send="ffn"></v-header>
       </div> 
       <template id="header">
           <main>
               <h1>这是子组件{{num}}</h1>
               {{fn()}}
           </main>
       </template>
       <script src="js/vue.js"></script>
       <script>
           var vheader={
               template:'#header',
               data(){
                   return {
                       num:'这是子组件的数据'
                   }
               },
               methods:{
                   fn(){
                       // 自己定义事件/方法
                       this.$emit('send',this.num)
                   }
               }
           }
           new Vue({
               el:'#app',
               data:{
                    msg:'hello 这是父组件',
                    t:''
               },
               components:{
                   'v-header':vheader
               },
               methods:{
                   ffn(a){
                    this.t=a;
                   }
               }
           })
       </script>
    </body>